Home > Article > Web Front-end > How to modify css in native js

How to modify css in native js

醉折花枝作酒筹Original: 2021-07-23 10:20:083414browse

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>

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to save css styleNext article：How to save css style

See more

How to modify css in native js

Related articles