Summary of methods for dynamically modifying css styles (four methods)

In many cases, dynamic modification of the style of elements on the web page is required. There are several ways to dynamically modify styles in JavaScript. The following will introduce the use, effects, and defects of the method.

1. Use to modify the class name of the style sheet.

2. Use to modify embedded css.

3. Use to modify the class name of the style sheet.

4. Use the change of the outreached css file to change the element's css

The following is a piece of html code and css code 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

 <div>
  <input  type="button" name="btnLogin" value="Log in" class="style1" />
  <div >
   <input type="button" value="【】change style" onclick="changeBackgroundColor()"/>
   <input type="button" value="【】change style" onclick="changeFontSize()" />
   <input type="button" value="【】change style" onclick="addRadius()" />
   <input type="button" value="Change the outreach css style" onclick="recover()" />
  </div>
 </div>

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

From the following code, you can see how btnB style is used.

 function changeStyle1() {
   var obj = ("btnB");
   = "black";

 }

This code modifies the color of the text of btB. Open the debugging tool in the browser and you can find that there is an additional attribute [style="inline>outline" in the btB tag. The background-color style of the hove pseudo-class of btB is written in the inline, so the embedded background-color covers the pseudo-class, which makes it impossible to feel the change in the background color when putting the mouse on btB.

Method 2: Use to modify embedded css

Directly enter JavaScript code:

 function changeStyle2() {
   var obj = ("btnB");
    = "background-color:black; display:block;color:White;

}

This code has the same effect as in [I], and the same defects.

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

Use code to modify the class name of the btB reference style, as follows:

 function changeStyle3() {
   var obj = ("btnB");
   // = "style2";
   ("class", "style2");
 }

Change the style by changing the class name of btB's css. There are two ways to change the style class name. 1. = "style2";  2. ("class", "style2"); are all the same effects.

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

Method 4: Use the external css file to change the element's css file

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

First, you have to reference the outreached css file, the code is as follows:

<link href="" rel="stylesheet" type="text/css" />

function changeStyle4() {
   var obj = ("css");
   ("href","");
 }

This can also easily change the style of btB. I personally think this method is the best and is the best solution to achieve overall page skinning.