How to modify style in javascript

Modification method: 1. Use "element object.className" to modify the class name of the style sheet; 2. Use "element object.style.cssTest" to modify the embedded css style; 3. Use "element object. The "setAttribute()" statement changes the style of the element by changing the external css file.

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

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 embedded css.

3. 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

<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="更改外联css样式" onclick="recover()" />
 </div>
</div>

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;

}

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

Method 3. Use obj.setAttribute 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. 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 be done Conveniently change the style of btB. Personally, I think this method is the most useful and the best solution to achieve overall page skinning.

[Recommended learning: javascript advanced tutorial]

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