Javascript_ dynamic modification of CSS style methods summary

In many cases, it is necessary to dynamically modify the style of the elements on the page. There are several ways to modify the style dynamically in JavaScript, and the use, effects, and flaws of the method are described below.

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

2, use Obj.style.cssTest to modify the embedded CSS.

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

4. Change the CSS of an element by using a CSS file that changes the outer union

Here is an HTML code and CSS code to explain the difference between the above methods.

Css

?

1234567

.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

?

123456789

<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 One, use Obj.classname to modify the class name of the style sheet

From the code below you can see how ob.style.cssTest is used to BTNB the style.

?

12345

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

The code modifies the color of the BTB text, opens the debugging tool in the browser, and discovers that the BTB tag has one more attribute "style=" inline > Out-of-union. and BTB Hove pseudo-class Background-color style is written in the inline, so the embedded Background-color cover the Pseudo-class, which makes the mouse into the BTB can not feel the background color changes.

Method two, using Obj.style.cssTest to modify the embedded CSS

Directly on the JavaScript code:

?

12345

functionchangeStyle2() {   var obj = document.getElementById("btnB");   obj.style.cssText = " display:block;color:White;}

The code and the "one" in the same effect, the flaw is the same.

Method Three, 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 in the following snippet:

?

12345

functionchangeStyle3() {  varobj = document.getElementById("btnB");  //obj.className = "style2";  obj.setAttribute("class", "style2");}

There are two ways to change the style class name by changing the way the class name of the bTB CSS is changed.  1, Obj.classname = "Style2"; 2, Obj.setattribute ("Class", "Style2"), all the same effect.

Modifying the CSS in this way is much better than the above effect.

Method Four, change the CSS of an element by using a CSS file that changes the outer union

It is easy to change the style of the BTB by changing the external CSS file reference. The code is as follows:

First you have to refer to the external CSS file, the code is as follows:

?

123456

<link href= "Css1.css" rel= "stylesheet" type= "text/css" id= "CSS" />  function changestyle4 ( { &NBSP;&NBSP;&NBSP; var obj = document.getElementById ( "CSS" &NBSP;&NBSP;&NBSP; obj.setattribute ( "href" "css2.css" &NBSP;

This can also easily change the style of the BTB, the personal feel that this is the best way to achieve the overall page skin change the best solution.

Javascript_ dynamic modification of CSS style methods summary