How to modify css in js

How to modify css in js: 1. Use [obj.style.cssTest] to modify the embedded css; 2. Use [bj.className] to modify the class name of the style sheet; 3. Use the change external linked css file, thereby changing the css of the element.

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

How to modify css in js:

Method 1. Use obj.style.cssTest to modify embedded css

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

Method 2. Use bj.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");
}

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 has a much better effect than the above.

Method 3: 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, operation Very simple. The code is as follows:

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

Recommended related tutorials: CSS video tutorial

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