How to modify css in native js

The methods are: 1. Through node.style.cssText="css expression 1; css expression 2; css expression 3"; 2. First set the specific class in the CSS style sheet Style, and then attach the style setting of the class to the node node through node.classname="class name".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Below I will introduce to you two ways to change CSS styles in native js:

1Through ## in the javascript code #node.style.cssText="css expression 1; css expression 2; css expression 3 "directly changes the CSS style.

2First set the style for a specific class such as the "active class" in the CSS style sheet (the active class here is assumed and does not exist for the time being), and then in the javascript code Throughnode.classname="active", the style setting of the active class in the CSS style sheet is attached to the node node.

The following is a detailed introduction, first is the html code:

First use the first method mentioned above to change the css style and write the following javascript code:

The running result is:

Then use the second method mentioned above to change the css style and write the following javascript code:

The result of the same operation is:

Summary: The results of these two methods are the same, but in terms of the operation process, the second method is "node.classname" This method separates the writing of css and js, which is obviously more reasonable and orderly. If the css statement is relatively simple, there is no difference between the two methods, but if the css statement is relatively complex, obviously the second method is more methodical.

Recommended learning:

css video tutorial

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