cssText的用法

转载 (原文地址) myjeh 随笔 待整理 670阅读 2014-08-27 15:12:10 举报

给一个HTML元素设置css属性,如
var head= document.getElementById("head");
head.style.width = "200px";
head.style.height = "70px";
head.style.display = "block";

这样写太罗嗦了,为了简单些写个工具函数,如
function setStyle(obj,css){
for(var atr in css){
obj.style[atr] = css[atr];
}
}
var head= document.getElementById("head");
setStyle(head,{width:"200px",height:"70px",display:"block"})

发现 Google API 中使用了cssText属性,后在各浏览器中测试都通过了。一行代码即可,实在很妙。如
var head= document.getElementById("head");
head.style.cssText="width:200px;height:70px;display:bolck";

和innerHTML一样,cssText很快捷且所有浏览器都支持。此外当批量操作样式时,cssText只需一次reflow,提高了页面渲染性能。

cssText 的使用    
obj.cssText = " width:200px;position:absolute;left:100px;";

cssText会清除之前元素含有的样式,所以得使用
obj.cssText += " width:200px;position:absolute;left:100px;";

但是在IE中的最后一个分号会被删除
obj.cssText += " ;width:200px;position:absolute;left:100px;"; //这样便能解决在IE中出现的问题了

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复