How to modify css in javascript

How to modify css in javascript: 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 of the style sheet Name; 4. Use the external css file to modify the css.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

javascript Summary of methods to dynamically modify css styles (four methods)

In many cases, it is necessary to dynamically modify the styles of elements on web pages. 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 the embedded css.

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

4. Use the external css file to change the css of the element

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

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

 <p>
  <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <p 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()" />
  </p>
 </p>

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

You can see from the code below 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 The background-color style of the hove pseudo-class 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 the embedded css

Directly upload the JavaScript code:

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

}

This code is the same as in [1] The effect is the same, and so are the flaws.

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

Use code to modify btB Reference the class name of the style, as in 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.

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

Method 4: Change the css file of the external link to change the css of the element

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

First of all, you must 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. I personally think this method is the best to use to achieve overall page skinning. The best solution.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to modify css in javascript. For more information, please follow other related articles on the PHP Chinese website!