[Javascript]cssText基本使用指北

1、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;";

2、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( )比较好。

3、cssText之靠边停车

你们一路上在前端的道路上驰骋下去吧，就不用靠边停车了！

立刻就要回家给伟大的祖国母亲庆祝生日了，微博上出现了2种不一样的声音：

做业本同窗说：

某注明做家（反正我是不认识）说：

做为还在上班（班，小名SegmentFault）的人，我就不说什么了...

你们国庆节快乐！