php开发之js修改页面css样式
在我以前的印象里，页面的字体属性，背景，等样式在页面加载后基本上都是固定的了，但是今天看到可以通过js修改页面的样式，觉得有必要和大家分享下。
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>css ajax </title><script type ="text/javascript" src ="test.js"> </script><link href ="styles.css" type ="text/css" rel ="stylesheet"/></head><body ><table id ="table" ><tr><th id ="tableHead">Product Name</th></tr><tr><td id ="tableFirstLine">AirPlane</td></tr><tr><td id ="tableSecondLine">Big car</td></tr></table><br/><input type ="button" value ="set style 1" onclick ="setStyle1()"/>触发事件改变页面的样式<input type ="button" value ="set style 2" onclick ="setStyle2()"/>触发事件改变页面样式</body></html>
现在页面的文字样式，背景，字体大小，都是系统默认的，待会儿，给大家演示下运行结果，可以比较下哦
test.js
function setStyle1(){ //将表的风格改为style1 //获取html的引用 oTable = document.getElementById("table"); oTableHead = document.getElementById("tableHead"); oTableFirstLine =document.getElementById("tableFirstLine"); otableSecondLine = document.getElementById("tableSecondLine"); //设置风格 oTable.className ="Table1"; oTableHead.className ="TableHead1"; oTableFirstLine.className ="TableContent1"; oTableSecondLine.classNamee ="TableContent1";}function setStyle2(){ //将表格的风格改为style2 //获取html元素的引用 oTable = document.getElementById("table"); oTableHead = document.getElementById("tableHead"); oTableFirstLine =document.getElementById("tableFirstLine"); otableSecondLine = document.getElementById("tableSecondLine"); //设置风格 oTable.className ="Table2"; oTableHead.className ="TableHead2"; oTableFirstLine.className ="TableContent2"; oTableSecondLine.classNamee ="TableContent2";}styles.css
/* @CHARSET "GB18030"; */.Table1{ border:DarkGreen 1px solid; background-color:LightGreen; }.TableHead1{ font-family:Verdana,Arial; font-weight:bold; font-size:10pt; }.TableContent1{ font-family:Verdana,Arial; font-size:10pt; }.Table2{ border:DarkBlue 1px solid; background-color:LightBlue; }.TableHead2{ font-family:Verdana,Arial; font-weight:bold; font-size:10pt; }.TableContent2{ font-family:Verdana,Arial; font-size:10pt; }运行效果如下：
另外这些知识点可以用在UIWebView与js的交互上哦，下面给大家演示下运行及效果哦
iOS的demo地址：demo
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Explain JSON Web Tokens (JWT) and their use case in PHP APIs.
Apr 05, 2025 am 12:04 AM
JWT is an open standard based on JSON, used to securely transmit information between parties, mainly for identity authentication and information exchange. 1. JWT consists of three parts: Header, Payload and Signature. 2. The working principle of JWT includes three steps: generating JWT, verifying JWT and parsing Payload. 3. When using JWT for authentication in PHP, JWT can be generated and verified, and user role and permission information can be included in advanced usage. 4. Common errors include signature verification failure, token expiration, and payload oversized. Debugging skills include using debugging tools and logging. 5. Performance optimization and best practices include using appropriate signature algorithms, setting validity periods reasonably,
How does session hijacking work and how can you mitigate it in PHP?
Apr 06, 2025 am 12:02 AM
Session hijacking can be achieved through the following steps: 1. Obtain the session ID, 2. Use the session ID, 3. Keep the session active. The methods to prevent session hijacking in PHP include: 1. Use the session_regenerate_id() function to regenerate the session ID, 2. Store session data through the database, 3. Ensure that all session data is transmitted through HTTPS.
What are Enumerations (Enums) in PHP 8.1?
Apr 03, 2025 am 12:05 AM
The enumeration function in PHP8.1 enhances the clarity and type safety of the code by defining named constants. 1) Enumerations can be integers, strings or objects, improving code readability and type safety. 2) Enumeration is based on class and supports object-oriented features such as traversal and reflection. 3) Enumeration can be used for comparison and assignment to ensure type safety. 4) Enumeration supports adding methods to implement complex logic. 5) Strict type checking and error handling can avoid common errors. 6) Enumeration reduces magic value and improves maintainability, but pay attention to performance optimization.
Describe the SOLID principles and how they apply to PHP development.
Apr 03, 2025 am 12:04 AM
The application of SOLID principle in PHP development includes: 1. Single responsibility principle (SRP): Each class is responsible for only one function. 2. Open and close principle (OCP): Changes are achieved through extension rather than modification. 3. Lisch's Substitution Principle (LSP): Subclasses can replace base classes without affecting program accuracy. 4. Interface isolation principle (ISP): Use fine-grained interfaces to avoid dependencies and unused methods. 5. Dependency inversion principle (DIP): High and low-level modules rely on abstraction and are implemented through dependency injection.
Explain late static binding in PHP (static::).
Apr 03, 2025 am 12:04 AM
Static binding (static::) implements late static binding (LSB) in PHP, allowing calling classes to be referenced in static contexts rather than defining classes. 1) The parsing process is performed at runtime, 2) Look up the call class in the inheritance relationship, 3) It may bring performance overhead.
What is REST API design principles?
Apr 04, 2025 am 12:01 AM
RESTAPI design principles include resource definition, URI design, HTTP method usage, status code usage, version control, and HATEOAS. 1. Resources should be represented by nouns and maintained at a hierarchy. 2. HTTP methods should conform to their semantics, such as GET is used to obtain resources. 3. The status code should be used correctly, such as 404 means that the resource does not exist. 4. Version control can be implemented through URI or header. 5. HATEOAS boots client operations through links in response.
How do you handle exceptions effectively in PHP (try, catch, finally, throw)?
Apr 05, 2025 am 12:03 AM
In PHP, exception handling is achieved through the try, catch, finally, and throw keywords. 1) The try block surrounds the code that may throw exceptions; 2) The catch block handles exceptions; 3) Finally block ensures that the code is always executed; 4) throw is used to manually throw exceptions. These mechanisms help improve the robustness and maintainability of your code.
What are anonymous classes in PHP and when might you use them?
Apr 04, 2025 am 12:02 AM
The main function of anonymous classes in PHP is to create one-time objects. 1. Anonymous classes allow classes without names to be directly defined in the code, which is suitable for temporary requirements. 2. They can inherit classes or implement interfaces to increase flexibility. 3. Pay attention to performance and code readability when using it, and avoid repeatedly defining the same anonymous classes.
