Home > Article > Web Front-end > What are the ways to use the cssText method of the style object?

What are the ways to use the cssText method of the style object?

php中世界最好的语言Original: 2018-02-22 09:35:432205browse

This time I will bring you how to use the cssText method of the style object, and what precautions are when using the cssText method of the style object. Here is a practical case, let’s take a look.

What is the essence of cssText?

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

How to use cssText?

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

cssText What is the return value?

In some browsers (such as Chrome), whatever value you assign to it will be returned. In IE, it is more painful. It will format the output , capitalize the attributes, change the order of the attributes, and remove the last semicolon. For example:

 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

Advantages of using cssText

Generally speaking, when we use js to set the style of element objects, we will use this form:

　　　　var element= document.getElementById(“id”);
　　　　element.style.width=”20px”;
　　　　element.style.height=”20px”;
　　　　element.style.border=”solid 1px red”;

When there are too many styles, there is a lot of code; and overriding 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:

　　domElement.style.cssText=”样式”;
　　domElement.style.cssText=”width:20px;height:20px;border:solid 1px red;”;

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

However, there will be a problem, it will clear the original cssText. For example, if there is 'display:none;' in the original style, then after executing the above JS, the display will be deleted. .
In order to solve this problem, you can use the cssText accumulation method:

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

Going further, if there is a style sheet file in front of it that says div { text-decoration:underline; }, this Will it be covered? Won't! Because it does not act directly on the style attribute of the HTML element.

Specific case analysis:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>控制div属性</title>
<style>
#outer{width:500px;margin:0 auto;padding:0;text-align:center;}
#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}
</style>
<script>
var changeStyle = function (elem, attr, value)
{
    elem.style[attr] = value
};
window.onload = function ()
{
    var oBtn = document.getElementsByTagName("input");
    var oDiv = document.getElementById("div1");
    var oAtt = ["width","height","background","display","display"];
    var oVal = ["200px","200px","red","none","block"];
 
    for (var i = 0; i < oBtn.length; i++)
    {
        oBtn[i].index = i;
        oBtn[i].onclick = function ()
        {
            this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
            changeStyle(oDiv, oAtt[this.index], oVal[this.index])
        }  
    }
};
</script>
</head>
<body>
<div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
</div>　　
</body>
</html>

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

What are the ways to use the cssText method of the style object?

Related articles