style对象的cssText办法是什么运用办法
发布时间：09/01 来源：未知 浏览：
关键词：
cssText 本质是啥？
cssText 的本质就是设定 HTML 元素的 style 属性值。
cssText 如何用？
domElement.style.cssText = "color:red; font-size:13px;";
cssText 返回值是啥？
在某些阅读器中（比方 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比力疾苦，它会格局化输出、会把属性大写、会改动属性次序、会去除最后一个分号，比方：
document.getElementById("d1").style.cssText = "color:red; font-size:13px;";2 alert(document.getElementById("d1").style.cssText);在 IE 中值为：FONT-SIZE: 13px; COLOR: red
cssText的使用优势
一样状况下我们用js设定元素对象的样式会使用这样的情势：
var element= document.getElementById(“id”); element.style.width=”20px”; element.style.height=”20px”; element.style.border=”solid 1px red”;
样式一多，代码就许多；并且通过JS来覆写对象的样式是比力典型的一种烧毁原样式并重建的历程，这种烧毁和重建，都会增添阅读器的开销。
js中有一个cssText的办法：
domElement.style.cssText=”样式”; domElement.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
这样就可以尽量幸免页面reflow，提高页面机能。
但是，这样会有一个问题，会把原有的cssText清掉，比方本来的style中有’display:none;’，那么施行完上面的JS后，display就被删掉了。
为理解决这个问题，可以采纳cssText累加的办法：
domElement.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’
再进一步，假如前面有样式表文件写着 div { text-decoration:underline; }，这个会被覆盖吗？不会！由于它不是直接作用于 HTML 元素的 style 属性。
详细案例剖析:
<!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>信赖看了这些案例你已经把握了办法，更多出色请关注百分百源码网其它相关文章！
相关阅读：
html与xhtml和xml有什么不同
iframe的子页面怎样操纵父页屏蔽页面弹出层结果
以上就是style对象的cssText办法是什么使用办法的具体内容，更多请关注百分百源码网其它相关文章！
