Summary of methods for dynamically modifying CSS styles in javascript (four methods)_javascript skills

In many cases, it is necessary to dynamically modify the styles of elements on the web page. JavaScript provides several ways to dynamically modify styles. The use, effects, and flaws of the methods will be introduced below.

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

2. Use obj.style.cssTest to modify embedded css.

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

4. Use the external 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 methods.

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 id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <div id="tool">
   <input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()"/>
   <input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
   <input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
   <input type="button" value="更改外联css样式" onclick="recover()" />
  </div>
 </div>

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

From the code below, you can see how ob.style.cssTest comes from btnB’s style.

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

 }

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

.

Method 2: Use obj.style.cssTest to modify embedded css

Directly upload JavaScript code:

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

}

The effect of this code is the same as that in [1], and the defects are also the same.

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

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

 function changeStyle3() {
   var obj = document.getElementById("btnB");
   //obj.className = "style2";
   obj.setAttribute("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. obj.className = "style2"; 2. obj.setAttribute("class", "style2"); have the same effect.

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

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

Change the style of btB by changing the external css file reference. The operation is very simple. The code is as follows:

First you have to quote the external css file, the code is as follows:

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

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

This can also easily change the style of btB. Personally, I think this method is the most useful and the best solution to achieve overall page skin change.