用cssText批量修改样式[更新]

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

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

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

js中有一个cssText的方法:

语法为:obj.style.cssText(“样式”)

obj.style.cssText=”样式”;

上面的代码我们可以修改成:感谢sliuqin的在留言中的斧正

element.style.cssText(“width:20px;height:20px;border:solid?1px?red;”)

element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;

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

——以下内容2009年10月10日更新,来自http://blog.xhlv.com/2009/09/csstext-ie-bug/-——————-

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

Element.style.cssText?+=?’width:100px;height:100px;top:100px;left:100px;’

但是,cssText(假如不为空)在IE中最后一个分号会被删掉,比较BT….
因此,上面cssText累加的方法在IE中是无效的。

最后,可以在前面添加一个分号来解决这个问题:

Element.style.cssText?+=?’;width:100px;height:100px;top:100px;left:100px;’

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 用cssText批量修改样式[更新]

评论 6

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    element.style.cssText(”width:20px;height:20px;border:solid 1px red;”)
    应该是:element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
    是属性,而不是方法

    sliuqin10年前 (2009-08-28)回复
  2. #-48

    早年是这么玩的 =>
    标准DOM方法:
    elem.setAttribute('style', styleString);
    早期IE的Hack版本:
    elem.style.setAttribute('cssText', styleString);

    cssText的兼容性:
    http://www.quirksmode.org/dom/w3c_css.html#t30

    各种方式性能比较:
    http://jsperf.com/style-vs-csstext-vs-setattribute/11

    xingxingwoo4年前 (2014-11-03)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏