Detailed analysis of CSS properties in JS batch operation_javascript skills

复制代码 代码如下:

   
   
   


   

   

       我是一个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.