CSSStyleSheet

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

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

样式表由一组 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(): 异步替换样式表的内容，并返回一个解析为更新后的 CSSStyleSheet 的 Promise。
CSSStyleSheet.replaceSync(): 同步替换样式表的内容。

遗留属性

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

rules 只读已弃用: rules 属性在功能上与标准的 cssRules 属性完全相同；它返回一个实时 CSSRuleList，该列表维护着样式表中所有规则的最新列表。

遗留方法

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

addRule() 已弃用

根据样式所适用的选择器以及应用于匹配元素的样式块，向样式表添加新规则。

这与 insertRule() 不同，后者将整个规则的文本表示作为单个字符串接收。

removeRule() 已弃用

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

获取样式表

一个样式表最多与一个 Document 相关联（除非禁用），它应用于该文档。可以使用 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`
(非 HTML) 文档中的 `<?xml-stylesheet ?>` 处理指令	是	`.ownerNode`	`ProcessingInstruction`	`.sheet`
JavaScript `import ... with { type: "css" }`	否	N/A	N/A	N/A
HTTP Link Header	是	N/A	N/A	N/A
用户代理（默认）样式表	否	N/A	N/A	N/A

规范

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年6月23日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的错误