CssText method of the style object, csstext of the style object

CssText method of the style object, csstext of the style object

What is the essence of cssText?

The essence of cssText is to set the style attribute value of the HTML element.

How to Use cssText?

domElement.style.cssText = "color:red; font-size:13px;";

What is the returned value of cssText?

In some browsers (such as Chrome), If you assign it a value, it returns the value. In IE, it is quite painful. It will format the output, capital the attributes, change the attribute order, and remove the last Semicolon. For example:

1 document.getElementById("d1").style.cssText = "color:red; font-size:13px;";2 alert(document.getElementById("d1").style.cssText);

In IE, the value is: FONT-SIZE: 13px; COLOR: red

CssText advantages

In general, we use js to set the style of element objects in this form:

Var element = document. getElementById ("id ");
Element. style. width = "20px ";
Element. style. height = "20px ";
Element. style. border = "solid 1px red ";

There are a lot of styles, and there are a lot of code. It is a typical process of destroying the original styles and recreating objects through JS, will increase the browser overhead.

Js has a cssText method:

DomElement.style.css Text = "style"; domElement.style.css Text = "width: 20px; height: 20px; border: solid 1px red ;";

In this way, you can try to avoid page reflow and improve page performance.

However, there will be a problem, and the original cssText will be cleared. For example, if there is 'display: none; 'in the original style, after the above JS is executed, the display will be deleted.
To solve this problem, you can use the cssText accumulation method:

　　domElement.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’

Further, if there is a style sheet file that says div {text-decoration: underline;}, will this be overwritten? No! Because it does not directly apply to the style attribute of HTML elements.

Case study:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
This article is based on the basics of https://www.cnblogs.com/majingyi/p/6840818.html.