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