再谈动态增添样式规则

再谈动态添加样式规则

转载来自：http://www.cnblogs.com/rubylouvre/archive/2009/08/30/1556869.html

以前我就是一篇博文就给出一个好用的函数，它在我几篇博文中被广泛运用的。最近看了不少东西，于是便有了这篇博文，以梳理我学到的新东西。

毫无疑问，基于表现与结构相分离的原则，直接导入一个新的样式表是最好的选择，但有些情况就行不通，如我们做一个能拖动的DIV，从设置样式的角度看，就是把它绝对定位，以防影响原来的文档流，然后一点点改变其top与left的值实现移动的效果。由于拖动是有时间概念的，一秒24帧，样式表不可能面面俱到都把它们写进去。因此动态生成样式规则与快速修改样式规则是非常有必要的，W3C为此做了大量的工作，在DOM2.0中，扩充了不少接口。

退一步说，表现与结构相分离也不止导入样式表这一条路。要知道，一共有三种样式类型，外部样式，内部样式，与内联样式。

外部样式，就是我们上面说的那个，写在一个独立的CSS文件中。内部样式，就是独立写在一个style标签中，通常是放在head标签中，我最后提供的函数生成的样式就是内部样式。内联样式，就是写在元素的style属性中的样式。

新添加的接口主要集中在外部样式中——之所以说接口，因为相应的实现是由浏览器方提供的，像IE6那样傲慢的家伙，从来无视它们的存在。

在W3C的模型中，type为"text/css"的link标签与style标签都是代表一个CSSStyleSheet对象，我们可以通过document.styleSheets 获得当前页面中所有的CSSStyleSheet对象，不过这是一个集合，非单纯的数组。每一个CSSStyleSheet对象拥有如下属性，

type：永远返回“text/css”字符串。disabled：和input的disabled的作用相同，默认是false。href：返回URL，如果是style标签为null。title：返回其title的值，title与普通元素的title无异，随你写什么。media：IE与火狐返回的东西并不一致，不太好说。media是用来规定它拥有的样式规则对什么设备有效，默认是所有。ownerRule：返回一个只读的CSSRule对象，如果样式表是用@import引入的话。cssRules： 返回一个只读的样式规则对象（CSSStyleRule object）的集合。

样式规则对象(CSSStyleRule object)，是W3C为了对样式进行更细致的设定而搞出来的，如下面这个东西就是对应一个样式规则对象:

}

有网友问，为何要优先使用已有样式表来添加新的样式规则，这是因为在IE(包括IE6、IE7和IE8 beta1)中有如下限制：

1. 文档中只有前31个link或style标记关联的CSS能够应用。?从第32个开始，其标记关联的CSS都将失效。IE的官方文档All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer也提及这个限制，包括在使用.xsl的.xml文件也有这个限制。
2. 一个style标记只有前31次@import指令有效应用。从第32个@import指令开始忽略。
3. 一个css文件只有前31次@import指令有效应用。从第32个@import指令开始忽略。
4. IE中每个style标签或css文件的选择符个数不能超过4095。
5. @import指令下层叠限制不能超过4层在IE下通过@import指令引入css文件时，第5层会失效。这个限制来自Cascade limit via @import rule。实际上，由于浏览器对多层嵌套的支持不完善，所以即使不得已使用了@import指令引入CSS文件，也不要超过2层。