CSSStyleSheet

CSSStyleSheet 接口代表一个 CSS 样式表，并允许检查和编辑样式表中的规则列表。它从父类型 StyleSheet 继承属性和方法。

一个 CSS 样式表包含了一组表示规则的 CSSRule 对象。每条 CSS 规则可以通过与之相关联的对象进行操作，这些规则被包含在 CSSRuleList 内，可以通过样式表的 cssRules (en-US) 属性获取。

例如，CSSStyleRule 对象中的一条规则可能包含这样的样式：

css
h1,
h2 {
  font-size: 16pt;
}

另一条规则可能是一条“@”规则（at-rule），例如 @import 或 @media 等等。

在说明部分中查看 CSSStyleSheet 对象的多种获取方式。

属性

继承自 StyleSheet。

cssRules (en-US) 只读

返回一个实时的 CSSRuleList，其中包含组成样式表的 CSSRule 对象的一个最新列表。

这一般用于获取单条规则，如下：

styleSheet.cssRules[i] // where i = 0..cssRules.length-1

使用CSSStyleSheet 的 insertRule() 和 deleteRule() 方法以在 cssRules 中添加或移除规则。

ownerRule (en-US) 只读

如果一个样式表示通过@import 规则引入文档，那么 ownerRule 属性会返回相应的CSSImportRule (en-US)对象，否则返回 null。

方法

继承自 StyleSheet。

deleteRule()

从样式表中删除特定位置的一条规则。

insertRule()

向样式表的特定位置插入一条新规则，需要提供新规则的完整文本。

遗留属性

这些遗留属性是很久以前由微软提出的，不应该再使用，但这些属性短期内不会被移除。

rules (en-US) 只读

rules 属性的功能与标准的cssRules (en-US)属性相同；它返回一个实时的 CSSRuleList，其中包含样式表中所有规则的一个最新列表。

遗留方法

这些遗留方法是很久以前由微软提出的，应尽量避免使用，但这些方法短期内不会被移除。

addRule() (en-US)

向样式表添加一条新规则，需要提供应用样式的选择器和应用在匹配元素上的样式块。

这和 insertRule() 不同，后者只是简单地将整个传入的规则文本当作一个字符串。

removeRule() (en-US)

与deleteRule()功能相同；从样式表的规则列表的特定位置中移除规则。

说明

在一些浏览器中，如果一个样式表加载自不同的域，访问 cssRules 属性时会抛出 SecurityError。

一个样式表最多与一个Document链接，即所应用的那个Document（除非disabled）。一个特定文档的 CSSStyleSheet 对象列表可用 document.styleSheets 属性获取。一个特定的样式表也可以通过其所在对象（Node 或 CSSImportRule）获取，如果有的话。

在文档的样式表加载时，一个 CSSStyleSheet 对象由浏览器自动创建并插入至文档的Document.styleSheets列表中。由于样式表列表不能直接修改，我们没有什么有效的手段取手动创建一个新的 CSSStyleSheet 对象（不过Constructable Stylesheet Objects很快会来到 web 平台，而且 Blink 早已支持）。需要创建新的样式表就直接在文档中插入<style> 或 <link> 元素吧。

以下是将样式表链接到文档的一些方式（可能不完整）：

样式表与文档链接的原因 是否出现在document. styleSheets 列表中 获取样式表对象所在的元素/规则 所在对象的接口 从所在对象获取 CSSStyleSheet 对象
文档中的<style> 和<link> 元素 是 .ownerNode (en-US) HTMLLinkElement (en-US), HTMLStyleElement, 或 SVGStyleElement (en-US) .sheet (en-US)
使用 CSS @import 从其他样式表导入并应用到文档的规则 是 .ownerRule (en-US) CSSImportRule (en-US) .styleSheet (en-US)
<?xml-stylesheet ?> processing instruction in the (non-HTML) document 是 .ownerNode (en-US) ProcessingInstruction .sheet (en-US)
HTTP 链接头部 是 N/A N/A N/A
用户代理（默认）样式表 否 N/A N/A N/A

规范

Specification
CSS Object Model (CSSOM)
# the-cssstylesheet-interface

浏览器兼容性

BCD tables only load in the browser

参见