Javascript dynamic css style modification method summary (four methods) _ javascript skills

To achieve a special effect, we need to use Javascript to dynamically change the Css attributes of a tag. how can we dynamically modify the css style? In the face of this problem, Xiao Bian has taken everyone to solve the problem of dynamically modifying css styles in javascript. in many cases, you need to dynamically modify the styles of elements on the web page. JavaScript provides several methods to dynamically modify styles. The following describes how to use, effect, and defects.

1. use obj. className to modify the class name of the style sheet.

2、use obj.style.css Test to modify the embedded css.

3. use obj. className to modify the class name of the style sheet.

4. use the css file to change the css file of the element.

Below is a piece of html code and css code used to explain the difference between the above method.

CSS

.style1{margin:10px auto ;background-color:#9999FF; display:block;color:White; border:1px solid white; padding:10px 25px; font-size:18px; }.style1:hover{ background-color:#66B3FF; cursor:pointer;}.style2{margin:10px auto ;background-color:gray; display:block;color:black; border:1px solid white; padding:10px 25px; font-size:18px; }.style2:hover{ background-color:black; color:White; cursor:pointer}

HTML

Method 1: Use obj. className to modify the class name of the style sheet.

The following code shows how the ob.style.css Test adopts the btnB style.

 function changeStyle1() {   var obj = document.getElementById("btnB");   obj.style.backgroundColor= "black"; }

This section of the code modifies the color of the btB text. open the debugging tool in the browser and you can find that the btB label has an attribute [style = "inline type> external type. While the btB hove pseudo class's background-color style is written in the inline style, so the embedded background-color overwrites the pseudo class, this prevents the background color from changing when you place the mouse over btB.

Use obj.style.css Test to modify the embedded css.

Directly add the JavaScript code:

 function changeStyle2() {   var obj = document.getElementById("btnB");   obj.style.cssText = "background-color:black; display:block;color:White;}

The code in this section is the same as that in [1], and the same is true for defects.

Method 3: Use obj. className to modify the class name of the style sheet.

Use the code to modify the class name of the btB reference style, as shown in the following code:

 function changeStyle3() {   var obj = document.getElementById("btnB");   //obj.className = "style2";   obj.setAttribute("class", "style2"); }

You can change the style by changing the class name of btB css. There are two ways to change the style class name. 1. obj. className = "style2"; 2. obj. setAttribute ("class", "style2"); all have the same effect.

Modifying css in this way is much better than the above.

Method 4: Use the css file to change the css file of the element

It is easy to change the style of btB by changing the reference of the css file of the external network. The code is as follows:

First, you must reference the external css file. the code is as follows:

 function changeStyle4() {   var obj = document.getElementById("css");   obj.setAttribute("href","css2.css?7.1.2"); }

This can also easily change the btB style. I personally think this method is the best, and it is the best solution to achieve the overall page skin replacement.