cssText基本使用及注意事项
一、cssText之起步
那些年,我们是这样设置样式的:
xxx.style.width = "233px"; xxx.style.position = "fixed"; xxx.style.left = "233px";
现如今,我们可以这样搞:
xxx.style.cssText = "width:233px; height:233px; position:fixed";
W3C是这样描述cssText:
cssText,DOMString类型
cssText特性必须返回序列化的CSS规则。
当设置cssText特性时运行这些步骤:
1. 解析其值。
2. 如果解析失败则终止运行。
3. 如果新对象的type并不匹配当前对象的type则抛出"InvalidModificationError"异常。
4. 替换当前对象为新对象。
请注意第四条:也就是说会覆盖到目标元素之前本身所具有的全部样式(继承的不算)。
举个栗子:
这里有一个<div>
,长下面这个模样:
.xxx {height:233px;width:233px;background:#F60;}
然后我要改变它的高度,我可以这么写:
xxx.style.height= "466px";
但是不可以这么写:
xxx.style.cssText="height:466px;";
二、cssText之提速
基于上面的原因,我们在使用cssText修改某个元素样式的时候,需要首先得到它当前的样式:
var xxx = document.getElementById("warp"); var xxx_style = xxx.style.cssText;
然后在加上现在的样式:
xxx_style += "position:fixed;"
xxx.style.cssText = xxx_style;
但是,如果需要IE6/7/8完美支持,那就需要注意了
当我们使用 var xxx_style = xxx.style.cssText;
得到样式的时候,最后是没有分号的。
也就是说,如果某个元素的样式是:
height: 100px; width: 100px;overflow: hidden;
在IE6/7/8下我们会得到:
HEIGHT: 100PX; WIDTH: 100PX; OVERFLOW: HIDDEN
最后的分号被丢掉了。
结果就是当我们再使用
xxx_style += "background:#F60;"
xxx.style.cssText = xxx_style;
来处理样式时,会出现:
height: 100px; width: 100px; overflow: hiddenbackground:#F60;
当然你可以选择使用:xxx_style = "background:#F60;" + xxx_style
的方式,最后没有分号也不会影响,但是世事难料,安全起见,还是额外判断一下,补上这个分号比较可靠。
除此以外,IE6/7/8下返回的属性和值全是大写,为了避免日后出现意外,还是.toLowerCase( )
比较好。
文章转自:https://segmentfault.com/a/1190000000703778