用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;’

更多相关链接:


或许你对这些感兴趣:

刚刚被浏览过的文章:


条评论

  1. 发表了 2009年08月28日 在 11:06 上午 | 永久链接

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

发表评论

Your email is never shared. 标记为 * 的为必填项目

*
*

评论时,昵称或个人网站填的是商业网站的,一概标记为垃圾评论不予显示,并设置相关网站为过滤关键字,提交到google、百度垃圾网站数据库