Javascript can change the style of the web page. Method: 1. Use the "element object.style.cssTest="style value"" statement to modify it; 2. Use the "element object.setAttribute("class", "value" )" statement modification; 3. Modify the web page style by changing the external css file.
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
javascript can change the style of the web page.
In javascript, you can change the style of the web page by dynamically modifying the CSS code.
How to modify CSS code in javascript
1. Use setAttribute() to modify the class name of the style sheet.
2. Use the cssTest of the style object to modify the embedded css.
3. Change the css of the element by changing the external css file
Example:
The following is a piece of html code and css code to explain the difference between the above methods of.
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
html code:
1 2 3 4 5 6 7 8 |
|
Method 1. Use obj.style.cssTest to modify the embedded css
1 2 3 4 5 |
|
Method 2. Use bj.setAttribute to modify the class name of the style sheet
Use code to modify the class name of the btB reference style, as follows:
1 2 3 4 5 |
|
Change the style by changing the class name of btB's css. There are two ways to change the style class name. 1. obj.className = "style2"; 2. obj.setAttribute("class", "style2"); have the same effect.
Using this method to modify css has a much better effect than the above.
Method 3: Change the css file of the external link to change the css of the element
Change the style of btB by changing the reference of the external css file, operation Very simple. The code is as follows:
First, you must quote the external css file, the code is as follows:
1 2 3 4 5 6 |
|
[Related recommendations: javascript video tutorial, web front-end 】
The above is the detailed content of Can javascript change the style of a web page?. For more information, please follow other related articles on the PHP Chinese website!