How to replace css style with js

How to replace css style with js: 1. Use obj.className to modify the class name of the style sheet; 2. Use obj.style.cssText to modify the embedded css; 3. Use obj.className to modify The class name of the style sheet; 4. Change the external css file.

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

How to replace css style with js?

javascript Summary of dynamically modifying css style methods - four methods

In order to achieve some special effect, we need to use Javascript to dynamically change it How to dynamically modify the css style of a certain label's CSS attribute? Faced with this problem, the editor will lead you to solve the problem of dynamically modifying CSS styles with JavaScript. Come and learn, friends.

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

<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 name of the style sheet

As you can see from the code below, ob How .style.cssText 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.cssText 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;
}

The effect of this code is the same as [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 the btB reference style, as shown in the following code:

function changeStyle3() {
  var obj = document.getElementById("btnB");
  //obj.className = "style2";
  obj.setAttribute("class", "style2");
}

Passed 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 ");
all have the same effect.
Using this method to modify css is much better than the above effect.

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 must reference 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 most useful and the best solution to achieve overall page skinning.

[Recommended learning: javascript basic tutorial】

The above is the detailed content of How to replace css style with js. For more information, please follow other related articles on the PHP Chinese website!