CSSStyleSheet

CSSStyleSheet 接口表示单个 CSS 样式表，并允许您检查和修改样式表中包含的规则列表。 它继承了其父级 StyleSheet 的属性和方法。

StyleSheet CSSStyleSheet

样式表由一组 CSSRule 对象组成，这些对象表示样式表中的每个规则。 这些规则包含在一个 CSSRuleList 中，该列表可以通过样式表的 cssRules 属性获取。

例如，一个规则可能是一个 CSSStyleRule 对象，其中包含诸如以下样式：

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

另一个规则可能是一个at-rule，例如 @import 或 @media，等等。

请参阅 获取样式表 部分，了解获取 CSSStyleSheet 对象的各种方法。 也可以直接构造 CSSStyleSheet 对象。 构造函数以及 CSSStyleSheet.replace() 和 CSSStyleSheet.replaceSync() 方法是规范中的较新添加内容，它们支持可构造样式表。

构造函数

CSSStyleSheet()

创建一个新的 CSSStyleSheet 对象。

实例属性

继承了其父级 StyleSheet 的属性。

CSSStyleSheet.cssRules 只读

返回一个实时的 CSSRuleList，该列表维护一个组成样式表的 CSSRule 对象的最新列表。

注意： 在某些浏览器中，如果样式表从不同域加载，则访问 cssRules 会导致 SecurityError。

CSSStyleSheet.ownerRule 只读

如果此样式表使用 @import 规则导入到文档中，则 ownerRule 属性将返回相应的 CSSImportRule；否则，此属性的值为 null。

实例方法

继承了其父级 StyleSheet 的方法。

CSSStyleSheet.deleteRule()

删除样式表规则列表中指定索引处的规则。

CSSStyleSheet.insertRule()

在样式表中指定位置插入一个新规则，并给出该规则的文本表示形式。

CSSStyleSheet.replace()

异步替换样式表的内容并返回一个 Promise，该承诺解析为更新后的 CSSStyleSheet。

CSSStyleSheet.replaceSync()

同步替换样式表的内容。

遗留属性

这些属性是 Microsoft 引入的遗留属性；这些属性是为了与现有网站兼容而保留的。

rules 只读

rules 属性的功能与标准 cssRules 属性相同；它返回一个实时的 CSSRuleList，该列表维护样式表中所有规则的最新列表。

遗留方法

这些方法是 Microsoft 引入的遗留方法；这些方法是为了与现有网站兼容而保留的。

addRule()

使用要应用样式的选择器和要应用于匹配元素的样式块将新规则添加到样式表中。

这与 insertRule() 不同，后者以整个规则的文本表示形式（作为单个字符串）作为参数。

removeRule()

功能与 deleteRule() 相同；从样式表的规则列表中删除指定索引处的规则。

获取样式表

样式表最多与一个 Document 相关联，该样式表应用于它（除非 disabled）。 可以使用 Document.styleSheets 属性获取给定文档的 CSSStyleSheet 对象列表。 还可以从其所有者对象（如果有的话，Node 或 CSSImportRule）访问特定样式表。

当为文档加载样式表时，浏览器会自动创建 CSSStyleSheet 对象并将其插入文档的 Document.styleSheets 列表中。

以下是样式表与文档关联方式的（可能不完整）列表

样式表与文档关联的原因 出现在 document.
styleSheets 列表中		 给定样式表对象后，获取所有者元素/规则 所有者对象的接口 从所有者获取 CSSStyleSheet 对象
<style> 和 <link> 元素在文档中 是 .ownerNode HTMLLinkElement,
HTMLStyleElement,
或 SVGStyleElement		 HTMLLinkElement.sheet,
HTMLStyleElement.sheet,
或 SVGStyleElement.sheet
应用于文档的其他样式表中的 CSS @import 规则 是 .ownerRule CSSImportRule .styleSheet
<?xml-stylesheet ?> 处理指令在（非 HTML）文档中 是 .ownerNode ProcessingInstruction .sheet
JavaScript import ... with { type: "css" } 否 不适用 不适用 不适用
HTTP 链接头 是 不适用 不适用 不适用
用户代理（默认）样式表 否 不适用 不适用 不适用

规范

规范
CSS 对象模型 (CSSOM)
# the-cssstylesheet-interface

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅