js css style operation code (batch operation)_javascript skills

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 code The code is 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 shortcoming, there are too many styles. There is a lot of code; and overwriting the style of an object through JS is a typical process of destroying the original style and rebuilding it. This destruction and rebuilding will increase the browser's overhead.

There is a cssText method in js:
The syntax is: obj.style.cssText("style");
We can modify the above code to:

Copy code The code is as follows:

element.style.cssText=”width:20px;height:20px;border:solid 1px red ;";

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