CSSStyleSheet

翻译正在进行中。

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

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

For example, one rule might be a CSSStyleRule object containing a style such as:

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

Another rule might be an at-rule such as @import or @media, and so forth.

See the Notes section for the various ways a CSSStyleSheet object can be obtained.

属性

cssRules 只读

Returns a live CSSRuleList which maintains an up-to-date list of the CSSRule objects that comprise the stylesheet.

This is normally used to access individual rules like this:

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

To add or remove items in cssRules, use the CSSStyleSheet's insertRule() and deleteRule() methods.

ownerRule 只读
如果一个样式表示通过@import 规则引入文档的,则 ownerRule 属性会返回那个CSSImportRule对象,否则返回 null

方法

deleteRule
从样式表中删除一条规则
insertRule
向样式表中插入一条新规则

遗留属性

These properties are legacy properties first introduced by Microsoft long ago; they shouldn't be used but are not likely to be removed anytime soon.

rules 只读
The rules property is functionally identical to the standard cssRules property; it returns a live CSSRuleList which maintains an up-to-date list of all of the rules in the style sheet.

遗留方法

These methods are legacy methods first introduced by Microsoft; they should not be used if they can be avoided, but are not in danger of being removed anytime soon.

addRule()

Adds a new rule to the stylesheet given the selector to which the style applies and the style block to apply to the matching elements.

This differs from insertRule(), which simply takes the textual representation of the entire rule as a single string.

removeRule()
Functionally identical to deleteRule(); removes the rule at the specified index from the stylesheet's rule list.

备注

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

A stylesheet is associated with at most one Document, which it applies to (unless disabled). A list of CSSStyleSheet objects for a given document can be obtained using the document.styleSheets property. A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.

A CSSStyleSheet object is created and inserted into the document's Document.styleSheets list automatically by the browser, when a stylesheet is loaded for a document. As the stylesheet list cannot be modified directly, there's no useful way to create a new CSSStyleSheet object manually (although Constructable Stylesheet Objects is coming to the web platform soon and is already supported in Blink). To create a new stylesheet, insert a <style> or <link> element into the document.

A (possibly incomplete) list of ways a stylesheet can be associated with a document follows:

Reason for the style sheet to be associated with the document Appears in document.
styleSheets
list
Getting the owner element/rule given the style sheet object The interface for the owner object Getting the CSSStyleSheet object from the owner
<style> and <link> elements in the document .ownerNode HTMLLinkElement,
HTMLStyleElement,
or SVGStyleElement
.sheet
CSS @import rule in other style sheets applied to the document .ownerRule CSSImportRule .styleSheet
<?xml-stylesheet ?> processing instruction in the (non-HTML) document .ownerNode ProcessingInstruction .sheet
HTTP Link Header N/A N/A N/A
User agent (default) style sheets N/A N/A N/A

规范

规范 状态 备注
CSS Object Model (CSSOM)
CSSStyleSheet
Working Draft
Document Object Model (DOM) Level 2 Style Specification
CSSStyleSheet
Obsolete Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
CSSStyleSheetChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
addRule()
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support 68IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 68Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
cssRulesChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
deleteRule()Chrome Full support YesEdge Full support 12Firefox Full support 1IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
insertRule()Chrome Full support YesEdge Full support 12Firefox Full support 1IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
ownerRuleChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
removeRule()
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support 68IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 68Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
rules
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support 68IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 68Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

参见