风格对象中cssText怎么用

　　介绍

小编给大家分享一下风格对象中cssText怎么用,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

,,,,

cssText本质是什么?

cssText的本质就是设置HTML元素的风格属性值。

cssText怎么用?

domElement.style.cssText =,“颜色:红色,,字体大小:13 px;“

cssText返回值是什么?

在某些浏览器中(比如Chrome),你给他赋什么值,它就返回什么值。在IE中则比较痛苦,它会格式化输出,会把属性大写,会改变属性顺序,会去掉最后一个分号,比如:

,. getelementbyid (“d1") .style.cssText =,“颜色:红色,,字体大小:13 px;“; 2,警报(. getelementbyid (“d1") .style.cssText);

在IE中值为:字体大小:13 px;颜色:红色

cssText的使用优势

一般情况下我们用js设置元素对象的样式会使用这样的形式:

var 元素=,. getelementbyid (" id "); 　　element.style.width=" 20 px”; 　　element.style.height=" 20 px”; 　　element.style.border=皊olid  1 px 红”;

样式一多,代码就很多,而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程,这种销毁和重建,都会增加浏览器的开销。

JS中有一个cssText的方法:

domElement.style.cssText=毖健? 　　domElement.style.cssText="宽度:20 px;高度:20 px;边界:solid  1 px 红色;”;

这样就可以尽量避免页面回流,提高页面性能。

但是,这样会有一个问题,会把原有的cssText清掉,比如原来的风格中有显示:没有,那么执行完上面的JS后,显示器就被删掉了。
为了解决这个问题,可以采用cssText累加的方法:

domElement.style.cssText  +=,’;宽度:100 px;高度:100 px;最高:100 px;左:100 px;”

再进一步,如果前面有样式表文件写着div{文字修饰:下划线;},这个会被覆盖吗?不!会因为它不是直接作用于HTML元素的风格属性。

具体案例分析:

& lt; ! DOCTYPE  html  PUBLIC “-//W3C//DTD  XHTML  1.0,过渡//EN",“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"比; 　　& lt; html  xmlns=癶ttp://www.w3.org/1999/xhtml"比; 　　& lt; head> 　　& lt; meta  http-equiv=癈ontent-Type",内容=皌ext/html;, charset=utf-8",/比; 　　& lt; title>控制div属性& lt;/title> 　　& lt; style> 　　#外{宽度:500 px;保证金:0,汽车;填充:0;text-align:中心;} 　　# div1{宽度:100 px;高度:100 px;背景:黑色;保证金:10 px 汽车;显示:块;} 　　& lt;/style> 　　& lt; script> 　　var  changeStyle =, function  (elem, attr,,值) 　　{ 　　,,,elem.style [attr],=,价值 　　}; 　　时间=window.onload  function  () 　　{ 　　,,,var  oBtn =, document.getElementsByTagName (“input"); 　　,,,var  oDiv =, . getelementbyid (“div1"); 　　,,,var  oAtt =, (“width",“height",“background",“display",“display"]; 　　,,,var  oVal =, (“200 px",“200 px",“red",“none",“block"]; 　　, 　　,,,for  (var 小姐:=,0;,小姐:& lt;, oBtn.length;,我+ +) 　　,,,{ 　　,,,,,,,oBtn[我].index =,我; 　　,,,,,,,oBtn[我].onclick =, function  () 　　,,,,,,,{ 　　,,,,,,,,,,,this.index ==, oBtn.length 作用;1,,,,(=oDiv.style.cssText ““); 　　,,,,,,,,,,,changeStyle (oDiv, oAtt (this.index),椭圆形[this.index]) 　　,,,,,,,},, 　　,,,} 　　}; 　　& lt;/script> 　　& lt;/head> 　　& lt; body> 　　& lt; div  id=皁uter"祝辞 　　& lt; input 类型=癰utton", value=https://www.yisu.com/zixun/北淇?/>