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

毫无疑问，基于表现与结构相分离的准绳，直接导入一个新的款式表是最好的选择，但有些情况就行不通，如我们做一个能拖动的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为了对款式进行更细致的设定而搞出来的，如下面这个东西就是对应一个款式规则对象:

button[type] {  
    padding:4px 10px 4px 7px;     
    line-height:17px;           
}

款式规则对象拥有如下几个次要属性：type,cssText,parentStyleSheet，parentRule。

type有点类似节点的nodeType，对款式规则进行细分，它是用一个整数来表示其类型。具体情况如下

• 0: CSSRule.UNKNOWN_RULE
• 1: CSSRule.STYLE_RULE (定义一个CSSStyleRule对象)
• 2: CSSRule.CHARSET_RULE (定义一个CSSCharsetRule对象，用于设定当前款式表的字符集，默认与当前网页相反)
• 3: CSSRule.IMPORT_RULE (定义一个CSSImportRule对象，就是用@import引入其他的款式表)
• 4: CSSRule.MEDIA_RULE (定义一个CSSMediaRule对象，用于设定此款式是用于显示器，打印机还是投影机等等)
• 5: CSSRule.FONT_FACE_RULE (定义一个CSSFontFaceRule对象，CSS3的@font-face)
• 6: CSSRule.PAGE_RULE (定义一个CSSPageRule对象)

cssText不用多说，一个非常有用的属性，直接把字符串转换成款式规则，无视各浏览器款式属性的差异，如cssFloat 和styleFloat。

parentStyleSheet和parentRule都是针对@import来说的。不过，@import在IE下有问题，我基本不用它。