Shulou(Shulou.com)06/01 Report--

This article will explain in detail what is the use of the cssText method on style objects. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

What is the essence of cssText?

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

How do I use cssText?

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

What is the return value of cssText?

In some browsers (such as Chrome), it returns whatever value you assign to it. It is more painful in IE, which formats the output, capitalizes attributes, changes the order of attributes, and removes the last semicolon, such as:

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

The value in IE is: FONT-SIZE:13px;COLOR:red

Advantages of using cssText

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

Varelement=document.getElementById ("id")

Element.style.width= "20px"

Element.style.height= "20px"

Element.style.border= "solid1pxred"

When there are more 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, which will increase the cost of the browser.

There is a method for cssText in js:

DomElement.style.cssText= "style"

DomElement.style.cssText= "width:20px;height:20px;border:solid1pxred;"

In this way, you can avoid page reflow as much as possible and improve page performance.

However, there will be a problem, which will remove the original cssText. For example, there is a 'display:none;', in the original style, so after executing the above JS, the display will be deleted.

To solve this problem, you can use the method of cssText accumulation:

DomElement.style.cssText+=';width:100px;height:100px;top:100px;left:100px;'

Further, will this be overwritten if there is a stylesheet file that says div {text-decoration:underline;}? No, I won't! Because it does not act directly on the style attribute of the HTML element.

Specific case study:

Control div properties

# outer {width:500px;margin:0auto;padding:0;text-align:center;}

# div1 {width:100px;height:100px;background:black;margin:10pxauto;display:block;}

VarchangeStyle=function (elem,attr,value)

{

Elem.style [attr] = value

}

_ window.onload=function ()

{

VaroBtn=document.getElementsByTagName ("input")

VaroDiv=document.getElementById ("div1")

VaroAtt= ["width", "height", "background", "display", "display"]

VaroVal= ["200px", "200px", "red", "none", "block"]

For (vari=0;i

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.