JavaScript dynamically modify CSS style method rollup (four methods) _javascript tips

In many cases, you need to make dynamic changes to the style of the elements on a Web page. There are several ways to modify styles dynamically in JavaScript, and the following describes the use, effects, and flaws of the method.

1, use Obj.classname to modify the style sheet class name.

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

3, use Obj.classname to modify the style sheet class name.

4, the use of changes to the CSS file, so as to change the elements of the CSS

The following is a section 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= "Login" class= "Style1"/> <div "id="
  Tool ">
   <input type=" button "value=" Obj.style.className "Change Style" onclick= "Changebackgroundcolor ()"/>
   <input type= "button" value= "Obj.style.cssText" Change Style "onclick=" changefontsize () "/> <input type=
   " Button "value=" "obj.classname" "Change Style" onclick= "Addradius ()"/> <input
   "button" type= "Change external CSS style" onclick= "Recover ()"/>
  </div>
 </div>

Method one, using Obj.classname to modify the class name of the style sheet

From the following code you can see how ob.style.cssTest is going to BTNB the style.

 function ChangeStyle1 () {
   var obj = document.getElementById ("BTNB");
   Obj.style.backgroundcolor= "BLACK";

 }

This code modifies the color of the BTB text, opens the debugging tool in the browser, and discovers that BTB tag has an extra attribute "style=" inline > outer-inline. The Background-color style of the Hove Pseudo class of BTB is written in inline, so the embedded Background-color covers the Pseudo class, which makes the mouse into the BTB does not feel the change of background color.

Method Two, use Obj.style.cssTest to modify the embedded CSS

Directly on JavaScript code:

 function ChangeStyle2 () {
   var obj = document.getElementById ("BTNB");
   Obj.style.cssText = "Background-color:black; Display:block;color:white;

}

This code and the "one" effect is the same, the defect is the same.

Method Three, use Obj.classname to modify the style sheet's class name

Use code to modify the class name of the BTB reference style, as in the following section of code:

 function ChangeStyle3 () {
   var obj = document.getElementById ("BTNB");
   Obj.classname = "Style2";
   Obj.setattribute ("Class", "Style2");
 }

Changing the style by changing the class name of the BTB CSS has two ways of changing the style class name.  1, Obj.classname = "Style2"; 2, Obj.setattribute ("Class", "Style2"), is the same effect.

Using this method to modify CSS is much better than the above.

Method Four, change the CSS of the element by using the CSS file that changes the external

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

The first thing to do is to refer to the CSS file in the following code:

<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 be convenient to change the style of BTB, personally feel that this way is the best use, is to achieve the overall page skin change the best solution.