Home > Web Front-end > JS Tutorial > Detailed analysis of CSS properties in JS batch operation_javascript skills

Detailed analysis of CSS properties in JS batch operation_javascript skills

WBOY
Release: 2016-05-16 17:09:00
Original
1062 people have browsed it

复制代码 代码如下:



   
   
   


   

   

       我是一个div啊,咿呀咿呀呦!
   

   
   

   

   

   

   

   

   

   

   

修改divTest的样式,多属性操作


   

        修改divTest的样式
   

   
   




When we use js to write css styles, we usually use the following two methods:

Generally, when we use js to set the style of element objects, we will use this form:
Copy the code as follows:
var element= document.getElementById("id");
element.style. width=”20px”;
element.style.height=”20px”;
element.style.border=”solid 1px red”;

But the above method has a disadvantage. If there are more styles, there will be a lot of code; and overriding the style of the object through JS is a typical process of destroying the original style and rebuilding it. This destruction and reconstruction will increase the cost. Browser overhead.

There is a cssText method in js:
The syntax is: obj.style.cssText("style");
We can modify the above code to :
Copy the code as follows:
element.style.cssText="width:20px;height:20px;border:solid 1px red;";

This way of writing can avoid multiple reflows of the page and improve page performance.

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template