一、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;
但是，客官如果贵司有下面这种情况，还请留步。
浏览器分布
面对这种丧心病狂、男默女泪的情况，我们需要额外注意一点：
当我们使用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( )比较好。
三、cssText之靠边停车
大家一路上在前端的道路上驰骋下去吧，就不用靠边停车了！
马上就要回家给伟大的祖国母亲庆祝生日了，微博上出现了2种不同的声音：
作业本同学说：
这个点还在上班的人，必将成为亿万富人！
某注明作家（反正我是不认识）说：
现在还在上班的，这辈子也就这样了。
作为还在上班（班，小名SegmentFault）的人，我就不说什么了...
大家国庆节快乐！
网友评论