就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. Web API
  3. CSSStyleSheet

在此页

CSSStyleSheet interface represents a single CSS stylesheet, and lets you inspect and modify the list of rules contained in the stylesheet. It inherits properties and methods from its parent, StyleSheet .

A stylesheet consists of a collection of CSSRule objects representing each of the rules in the stylesheet. The rules are contained in a CSSRuleList , which can be obtained from the stylesheet's 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 譬如 @import or @media , and so forth.

见 注意事项 section for the various ways a CSSStyleSheet object can be obtained.

特性

继承的特性来自其父级， StyleSheet .

cssRules 只读

返回实时 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 ，使用 CSSStyleSheet 's insertRule() and deleteRule() 方法。

ownerRule 只读
If this stylesheet is imported into the document using an @import rule, the ownerRule property returns the corresponding CSSImportRule ; otherwise, this property's value is null .

方法

继承方法来自其父级 StyleSheet .

deleteRule()

Deletes the rule at the specified index into the stylesheet's rule list.

insertRule()

Inserts a new rule at the specified position in the stylesheet, given the textual representation of the rule.

Legacy properties

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 只读
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.

Legacy methods

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.

注意事项

In some browsers, if a stylesheet is loaded from a different domain, accessing cssRules 产生 SecurityError .

A stylesheet is associated with at most one Document , which it applies to (unless 被禁用 ). 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 对象 ( 节点 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 文档。
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 Yes .ownerNode HTMLLinkElement ,
HTMLStyleElement ,
or SVGStyleElement 		.sheet
CSS @import rule in other style sheets applied to the document Yes .ownerRule CSSImportRule .styleSheet
<?xml-stylesheet ?> processing instruction in the (non-HTML) document Yes .ownerNode ProcessingInstruction .sheet
HTTP Link Header Yes N/A N/A N/A
User agent (default) style sheets No N/A N/A N/A

规范

规范 状态 注释
CSS Object Model (CSSOM)
The definition of 'CSSStyleSheet' in that specification. 		工作草案
Document Object Model (DOM) Level 2 Style Specification
The definition of 'CSSStyleSheet' in that specification. 		过时 初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
桌面 移动
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
CSSStyleSheet Chrome Yes Edge 12 Firefox 1 IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
addRule() 弃用 Chrome Yes Edge 12 Firefox 68 IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 68 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
cssRules Chrome Yes Edge 12 Firefox 1 IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
deleteRule() Chrome Yes Edge 12 Firefox 1 IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
insertRule() Chrome Yes Edge 12 Firefox 1 IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
ownerRule Chrome Yes Edge 12 Firefox 1 IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
removeRule() 弃用 Chrome Yes Edge 12 Firefox 68 IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 68 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
rules 弃用 Chrome Yes Edge 12 Firefox 68 IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 68 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes

图例

完整支持

完整支持

弃用。不要用于新网站。

弃用。不要用于新网站。

另请参阅

元数据

  • 最后修改：
  1. CSS Object Model
  2. CSSStyleSheet
  3. 特性
    1. cssRules
    2. ownerRule
    3. rules
  4. 方法
    1. addRule()
    2. deleteRule()
    3. insertRule()
    4. removeRule()
  5. 继承：
    1. StyleSheet
  6. Related pages for CSSOM
    1. AnimationEvent
    2. CSS
    3. CSSConditionRule
    4. CSSGroupingRule
    5. CSSKeyframeRule
    6. CSSKeyframesRule
    7. CSSMediaRule
    8. CSSNamespaceRule
    9. CSSPageRule
    10. CSSRule
    11. CSSRuleList
    12. CSSStyleDeclaration
    13. CSSStyleRule
    14. CSSSupportsRule
    15. CaretPosition
    16. LinkStyle
    17. MediaQueryList
    18. MediaQueryListListener
    19. Screen
    20. StyleSheet
    21. StyleSheetList
    22. TransitionEvent