CSSStyleSheet
The 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
property.
For example, one rule might be a CSSStyleRule
object containing a style such as:
css
h1,
h2 {
font-size: 16pt;
}
Another rule might be an at-rule such as @import
or @media
, and so forth.
See the Obtaining a StyleSheet section for the various ways a CSSStyleSheet
object can be obtained. A CSSStyleSheet
object can also be directly constructed. The constructor, and the CSSStyleSheet.replace()
, and CSSStyleSheet.replaceSync()
methods are newer additions to the specification, enabling Constructable Stylesheets.
Constructor
CSSStyleSheet()
-
Creates a new
CSSStyleSheet
object.
Instance properties
Inherits properties from its parent, StyleSheet
.
CSSStyleSheet.cssRules
Read only-
Returns a live
CSSRuleList
which maintains an up-to-date list of theCSSRule
objects that comprise the stylesheet.Note: In some browsers, if a stylesheet is loaded from a different domain, accessing
cssRules
results in aSecurityError
. CSSStyleSheet.ownerRule
Read only-
If this stylesheet is imported into the document using an
@import
rule, theownerRule
property returns the correspondingCSSImportRule
; otherwise, this property's value isnull
.
Instance methods
Inherits methods from its parent, StyleSheet
.
CSSStyleSheet.deleteRule()
-
Deletes the rule at the specified index into the stylesheet's rule list.
CSSStyleSheet.insertRule()
-
Inserts a new rule at the specified position in the stylesheet, given the textual representation of the rule.
CSSStyleSheet.replace()
-
Asynchronously replaces the content of the stylesheet and returns a
Promise
that resolves with the updatedCSSStyleSheet
. CSSStyleSheet.replaceSync()
-
Synchronously replaces the content of the stylesheet.
Legacy properties
These properties are legacy properties as introduced by Microsoft; these are maintained for compatibility with existing sites.
rules
Read only Deprecated-
The
rules
property is functionally identical to the standardcssRules
property; it returns a liveCSSRuleList
which maintains an up-to-date list of all of the rules in the style sheet.
Legacy methods
These methods are legacy methods as introduced by Microsoft; these are maintained for compatibility with existing sites.
addRule()
Deprecated-
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 takes the textual representation of the entire rule as a single string. removeRule()
Deprecated-
Functionally identical to
deleteRule()
; removes the rule at the specified index from the stylesheet's rule list.
Obtaining a StyleSheet
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.
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. 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
|
HTMLLinkElement.sheet ,HTMLStyleElement.sheet ,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 |
Specifications
Specification |
---|
CSS Object Model (CSSOM) # the-cssstylesheet-interface |
Browser compatibility
BCD tables only load in the browser