Recommend four javascript modification css style example codes

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

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

From the code below, you can see how ob.style.cssTest derives the btnB style.

 function changeStyle1() {
   var obj = document.getElementById("btnB");
   obj.style.backgroundColor= "black";

 }

This code modifies the color of 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 style. The background-color style of btB's hove pseudo-class is written in inline style, so the embedded background-color covers the pseudo-class, which makes the background color invisible 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;

}

The effect of this code is the same as in [1], and the defects are also the same.

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

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

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

By changing the css of btB There are two ways to change the style class name. 1. obj.className = "style2"; 2. obj.setAttribute("class", "style2");

Modifying css in this way is much better than the above method

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

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");
 }

The above is the detailed content of Recommend four javascript modification css style example codes. For more information, please follow other related articles on the PHP Chinese website!