CSS规则 – 学习画板

首页 » DOM » CSS规则

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";
此文章发表在 DOM. 将 固定链接 加入收藏.