How to modify css style with js

How to modify css style in js: 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 css that changes the outer link.

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

JS method to modify css style:

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

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.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 snippet:

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

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.

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

Method 4. Use the change method The linked css file, thereby changing 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 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");
 }

Recommended related tutorials: CSS video tutorial

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