CSSStyleSheet - 表示一个 CSS 样式表

CSSStyleSheet 接口表示一个 CSS 样式表。它从其父类 StyleSheet 继承了属性和方法。

样式表由 rules 组成，例如 style rules（“h1,h2 { font-size: 16pt }"），各种 at-rules（@import，@media，...）等等。这个接口让你检查和修改样式表中的规则列表。

有关可以获取 CSSStyleSheet 对象的各种方法，请参阅 注意 部分。

属性

继承其父类 StyleSheet 的属性。

CSSStyleSheet.cssRules

返回一个实时的 CSSRuleList，包含了样式表中的 CSSRule 对象。这通常用于访问单个规则，如下所示：styleSheet.cssRules[i] // where i = 0..cssRules.length-1
要添加或删除 cssRules 中的项目，请使用 CSSStyleSheet 的 deleteRule() 和 insertRule() 方法，如下所述。

CSSStyleSheet.ownerRule

如果使用 @import 规则将该样式表导入到文档中，则 ownerRule 属性将返回 CSSImportRule，否则返回 null。

方法

继承其父类 StyleSheet 的方法。

CSSStyleSheet.deleteRule()

从样式表中删除指定位置的规则。

CSSStyleSheet.insertRule()

在样式表中的指定位置，将给定规则的文本，插入为新的规则。

注意

在某些浏览器中，如果样式表从另一个域名加载，调用 cssRules 将导致 SecurityError 。

样式表至多与一个它所属的 Document 相关联（除非是 disabled）。可以使用 document.styleSheets 属性获取给定文档的 CSSStyleSheet 对象列表。如果有的话，还可以通过它的 owner 对象（Node 或 CSSImportRule）访问特定的样式表。

当文档加载样式表时，浏览器会自动创建一个 CSSStyleSheet 对象并将其插入到文档的 styleSheets 列表中。由于无法直接修改 document.styleSheets 列表，因此无法手动创建新的 CSSStyleSheet 对象（但是可构造的样式表可能在将来会添加到 Web API 中）。要创建新的样式表，请在文档中插入 <style> 或 <link> 元素。

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

样式表与文档关联的原因	出现在 document.styleSheets 列表中	在给定样式表对象的情况下获取所有者元素/规则	所有者对象的接口	从所有者获取 CSSStyleSheet 对象
文档中的 <style> 和 <link> 元素	Yes	.ownerNode	HTMLLinkElement, HTMLStyleElement 或 SVGStyleElement	.sheet
CSS @import 规则应用于文档的其他样式表	Yes	.ownerRule	CSSImportRule	.styleSheet
<?xml-stylesheet ?> 处理（非 HTML）文档中的指令	Yes	.ownerNode	ProcessingInstruction	.sheet
HTTP Link Header	Yes	N/A	N/A	N/A
用户代理（默认）样式表	No	N/A	N/A	N/A

规范

规范	状态	备注
CSS Object Model (CSSOM) CSSStyleSheet 的定义	工作草案	-
Document Object Model (DOM) Level 2 Style Specification CSSStyleSheet 的定义	已过时	初始定义

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 使用动态样式信息