javascript change style style and css style

javascript change style style and css style

Reprint

In many cases, it is necessary to dynamically modify the style of the elements on the web page. There are several ways to dynamically modify styles in JavaScript. The use, effects, and defects of the methods are introduced 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. Use to change the css file of the external connection, thereby changing the css of the element

The following is a piece of html code and css code to explain the difference between the above methods.

CSS

?
1 2 3 4 5 6 7 .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

?
1 2 3 4 5 6 7 8 9 <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, we can see how ob.style.cssTest comes to the style of btnB.

?
1 2 3 4 5 function changeStyle1() {   var obj = document.getElementById("btnB");   obj.style.backgroundColor= "black";   }

This piece of code modifies the color of the btB 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 the background-color style of the hove pseudo-class of btB Written in inline type, so the embedded background-color covers the pseudo-class, which makes the background color change without the mouse being placed on the btB.

Method two, use obj.style.cssTest to modify the embedded css

Go directly to the JavaScript code:

?
1 2 3 4 5 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 in [1], and the defect is the same.

Method three, use obj.className to modify the class name of the style sheet

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

?
1 2 3 4 5 function changeStyle3() {   var obj = document.getElementById("btnB");   //obj.className = "style2";   obj.setAttribute("class", "style2"); }

You can change the style by changing the css class name of btB. 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 effect.

Method four, use to change the external css file, thereby changing the css of the element

It is very simple to change the style of btB by changing the external css file reference. code show as below:

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

?
1 2 3 4 5 6 <link href="css1.css" rel="stylesheet" type="text/css" id="css"/>   function changeStyle4() {    var obj = document.getElementById("css");    obj.setAttribute("href","css2.css");  }

In this way, you can easily change the style of btB. I personally think that this method is the best to use, and it is the best solution for realizing the overall page skinning.