CSS规则

CSSRule对象表示样式表中的每一个规则。实际上，CSSRule是一个供其它多种类型继承的基类型，其中最常见的就是CSSStyleRule类型，表示样式信息。CSSStyleRule对象包含下列属性：

• cssText：返回整条规则对应的文本。由于浏览器对样式表的内部处理方式不同，返回的文本可能会与样式表中实际的文本不一样；Safari始终都会将文本转换成全部小写。IE不支持这个属性。
• parentRule：如果当前规则是导入的规则，这个属性引用的就是导入规则；否则这个值是null。IE不支持这个属性。
• parentStyleSheet：当前规则所属的样式表。IE不支持这个属性。
• selectorText：返回当前规则的寻泽扶文本。
• style：一个CSSStyleDeclaration对象，可以通过它设置和取得规则中特定的样式值。
• type：表示规则类型的常量值。对于样式规则，这个值是1。IE不支持这个属性。

其中最常用的属性是csstext、selectorText和style。cssText属性style.cssText属性类似，但并不相同。前者包含选择符文本和围绕样式信息的花括号，后者只包含样式信息。此外，cssText是只读的，而style.cssText也可以被重写。

大多数情况下，仅使用style属性就可以满足所有操作样式规则的需求了。这个对象就像每个元素上的style属性一样，我们可以通过它读取和修改该规则中的样式信息。以下面的CSS规则为例：

div.box {
    width: 100px;
    height: 200px;
    background-color: blue;
}

假设这条规则位于页面中的第一个样式表中，而且这个样式表中只有这一条样式规则，那么通过下列代码可以取得这条规则的各种信息：

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;    //取得规则列表
var rule = rules[0];                          //取得第一条规则
alert(rule.selectorText);                     //"div.box";
alert(rule.style.cssText);                    //完整的CSS代码
alert(rule.style.backgroundColor);            //"blue"
alert(rule.style.width);                      //"100px"
alert(rule.style.height);                     //"200px"

使用这种方式，可以像确定元素的行内样式信息一样，确定与规则相关的样式信息。与使用元素的方式一样，在这种方式下也可以修改样式信息，如下面的例子所示：

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
var rule = rules[0];
rule.style.backgroundColor = "red";