How to style CSS via JavaScript

In web development, setting CSS styles is a very common operation. JavaScript can set CSS styles through DOM operations. This article will introduce how to set CSS styles through JavaScript.

1. Get the element and set the style

To set the CSS style through JavaScript, you first need to get the element to be styled. There are many ways to obtain it. Taking the element with the ID "demo" as an example, you can use the following code:

var demo = document.getElementById("demo");

After obtaining the element, you can set its CSS style through the element's style attribute. For example, to set the background color of an element to red, you can use the following code:

demo.style.backgroundColor = "red";

Similarly, you can use the style attribute to set the size, border, font, text color, etc. of the element. You only need to convert the CSS style attribute name Just name it in camel case and assign the attribute value to the style attribute. For example, to set the border width of an element to 1 pixel and the border color to blue, you can use the following code:

demo.style.borderWidth = "1px";
demo.style.borderColor = "blue";

2. Use the classList object to set the style

In addition to using the style attribute of the element to set the CSS In addition to styles, you can also use classList objects to set styles. The classList object provides methods such as add, remove, and toggle to operate the class attribute of the element to achieve functions such as adding, deleting, and switching styles.

For example, to add a class named "highlight" to an element you can use the following code:

demo.classList.add("highlight");

To remove a class named "highlight" you can use the following code:

demo.classList.remove("highlight");

To switch the class named "highlight", you can use the following code:

demo.classList.toggle("highlight");

3. Set the style through the CSSStyleSheet object

In JavaScript, the CSS style sheet is also represented as an object, namely CSSStyleSheet object. CSS styles can also be set through the CSSStyleSheet object. To set the style through the CSSStyleSheet object, you need to first obtain the style sheet to be operated. There are many ways to obtain it. Taking the style sheet with the ID "styleSheet" as an example, you can use the following code:

var styleSheet = document.getElementById("styleSheet").sheet;

After obtaining the style sheet, you can use the insertRule method to add style rules to the style sheet. . For example, to add a new style rule to the style sheet to make the background color of the element green, you can use the following code:

styleSheet.insertRule("#demo {background-color: green;}", 0);

Note that the second parameter here indicates the position where the style rule is inserted, 0 means Insert at the beginning of the style sheet, -1 means insert at the end of the style sheet.

In addition to inserting style rules, the CSSStyleSheet object also provides the deleteRule method to delete style rules. For example, to delete the first style rule in the style sheet, you can use the following code:

styleSheet.deleteRule(0);

IV. Summary

Through the above introduction, we can understand how to operate CSS styles through JavaScript. Including using the element's style attribute, classList object and CSSStyleSheet object. Of course, this is just the tip of the iceberg when it comes to JavaScript styling. There are many advanced usages and techniques that we need to master and learn.

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