How to modify css in native js-CSS Tutorial-php.cn

How to modify css in native js

醉折花枝作酒筹

Release： 2023-01-07 11:45:18

Original

3523 people have browsed it

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 Through node.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:

<style type="text/css">
           div {
			float: left;
			padding: 20px;
			margin: 10px;
			border: 1px solid #000;
			background-color: #fff;
			color: #000;
		}
           .active
                {
                       background-color:blue
                }
</style>
<body>
      <div class="root">
      </div>
</body>

Copy after login

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

<script type="text/javascript">  
          var root=document.getElementsByClassName("root")[0];
       root.style.cssText="background-color: blue;color: #fff;";
 </script>

Copy after login

The running result is:

How to modify css in native js

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

<script type="text/javascript">  
       var root=document.getElementsByClassName("root")[0];
           root.className="active";</script>

Copy after login

The result of the same operation is:

How to modify css in native js

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!