The CSSStyleSheet
interface represents a single CSS style sheet. It inherits properties and methods from its parent, StyleSheet
.
A style sheet consists of rules, such as style rules("h1,h2 { font-size: 16pt }"
), various at-rules (@import
, @media
, ...), etc. This interface lets you inspect and modify the list of rules in the stylesheet.
See the Notes section for the various ways a CSSStyleSheet object can be obtained.
Inherits properties from its parent, StyleSheet
.
CSSStyleSheet.cssRules
CSSRuleList
, listing the CSSRule
objects in the style sheet. styleSheet.cssRules[i] // where i = 0..cssRules.length-1
cssRules
, use the CSSStyleSheet
's deleteRule()
and insertRule()
methods, described below.CSSStyleSheet.ownerRule
@import
rule, the ownerRule
property will return that CSSImportRule
, otherwise it returns null
.Inherits methods from its parent, Stylesheet
.
CSSStyleSheet.deleteRule()
CSSStyleSheet.insertRule()
In some browsers, if a stylesheet is loaded from a different domain, calling cssRules
results in 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 styleSheets
list automatically by the browser, when a style sheet is loaded for a document. As the document.styleSheets
list cannot be modified directly, there's no useful way to create a new CSSStyleSheet
object manually (although Constructable Stylesheet Objects might get added to the Web APIs at some point). To create a new stylesheet, insert a <style>
or <link>
element into the document.
A (possibly incomplete) list of ways a style sheet can be associated with a document follows:
Reason for the style sheet to be associated with the document | Appears in document. 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 |
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) The definition of 'CSSStyleSheet' in that specification. | Working Draft | |
Document Object Model (DOM) Level 2 Style Specification The definition of 'CSSStyleSheet' in that specification. | Obsolete | Initial definition |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | 9.0 | (Yes) | (Yes) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet