CSS object model
The CSS Object Model exposes style rules and computed styles to JavaScript. It helps applications inspect or adjust styling logic beyond plain class toggling.
Overview
The CSS Object Model exposes style rules and computed styles to JavaScript. It helps applications inspect or adjust styling logic beyond plain class toggling.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 28 | 12 | 22 | 9 | 28 | 9 | |
| An object implementing the CSSConditionRule interface represents a single condition CSS at-rule, which consists of a condition and a statement block. | 56 | 12 | 20 | 14.1 | 56 | 14.5 |
| The read-only conditionText property of the CSSConditionRule interface returns or sets the text of the CSS rule. | 56 | 12 | 20 | 14.1 | 56 | 14.5 |
| The CSSGroupingRule interface of the CSS Object Model represents any CSS at-rule that contains other rules nested within it. | 45 | 12 | 20 | 14.1 | 45 | 14.5 |
| The cssRules property of the CSSGroupingRule interface returns a CSSRuleList containing a collection of CSSRule objects. | 45 | 12 | 20 | 3 | 45 | 2 |
| The deleteRule() method of the CSSGroupingRule interface removes a CSS rule from a list of child CSS rules. | 45 | 12 | 20 | 3 | 45 | 2 |
| The insertRule() method of the CSSGroupingRule interface adds a new CSS rule to a list of CSS rules. | 45 | 12 | 20 | 3 | 45 | 2 |
CSSMarginRule Experimental | 131 | 131 | | | 131 | |
name Experimental | 131 | 131 | | | 131 | |
style Experimental | 131 | 131 | | | 131 | |
| The CSSMediaRule interface represents a single CSS @media rule. | 1 | 12 | 1 | 3 | 18 | 1 |
| The read-only media property of the CSSMediaRule interface contains a MediaList object representing the media query list of the @media rule. | 1 | 12 | 1 | 3 | 18 | 1 |
| The CSSPageDescriptors interface represents a CSS declaration block for an @page at-rule. | | | 129 | 26 | | 26 |
| A string representing the margin property of the corresponding @page at-rule. | | | 129 | 26 | | 26 |
| A string representing the margin-bottom property of the corresponding @page at-rule. | | | 129 | 26 | | 26 |
| A string representing the margin-left property of the corresponding @page at-rule. | | | 129 | 26 | | 26 |
| A string representing the margin-right property of the corresponding @page at-rule. | | | 129 | 26 | | 26 |
| A string representing the margin-top property of the corresponding @page at-rule. | | | 129 | 26 | | 26 |
| | | 129 | 26 | | 26 | |
| | | 129 | 26 | | 26 | |
| | | 129 | 26 | | 26 | |
| | | 129 | 26 | | 26 | |
page-orientation Experimental A string representing the page-orientation property of the corresponding @page at-rule. | | | 129 | | | |
pageOrientation Experimental | | | 129 | | | |
| A string representing the size property of the corresponding @page at-rule. | | | 129 | 26 | | 26 |
| CSSPageRule represents a single CSS @page rule. | 1 | 12 | 19 | 3 | 18 | 1 |
| The selectorText property of the CSSPageRule interface gets and sets the selectors associated with the CSSPageRule. | 1 | 12 | 110 | 3 | 18 | 1 |
| The read-only style property of the CSSPageRule interface contains a CSSPageDescriptors object representing the descriptors available in the @page rule's body. | 1 | 12 | 19 | 3 | 18 | 1 |
style (type CSSPageDescriptors) Type changed to `CSSPageDescriptors` | | | 129 | 26 | | 26 |
CSSPseudoElement Experimental The CSSPseudoElement interface represents a pseudo-element that may be the target of an event or animated using the Web Animations API. Instances of this interface may be obtained by calling Element.pseudo(). | 147 | 147 | 75 | | 147 | |
element Experimental The element read-only property of the CSSPseudoElement interface returns a reference to the originating element of the pseudo-element, in other words its parent element. | 147 | 147 | 75 | | 147 | |
type Experimental The type read-only property of the CSSPseudoElement interface returns the type of the pseudo-element as a string, represented in the form of a CSS selector. | 147 | 147 | 75 | | 147 | |
| The CSSRule interface represents a single CSS rule. There are several types of rules which inherit properties from CSSRule. | 1 | 12 | 1 | 1 | 18 | 1 |
| The cssText property of the CSSRule interface returns the actual text of a CSSStyleSheet style-rule. | 1 | 12 | 1 | 1 | 18 | 1 |
| The parentRule property of the CSSRule interface returns the containing rule of the current rule if this exists, or otherwise returns null. | 1 | 12 | 1 | 1 | 18 | 1 |
| The parentStyleSheet property of the CSSRule interface returns the StyleSheet object in which the current rule is defined. | 1 | 12 | 1 | 1 | 18 | 1 |
| A CSSRuleList represents an ordered collection of read-only CSSRule objects. | 1 | 12 | 1 | 1 | 18 | 1 |
| The item() method of the CSSRuleList interface returns the CSSRule object at the specified index or null if the specified index doesn't exist. | 1 | 12 | 1 | 1 | 18 | 1 |
| The length property of the CSSRuleList interface returns the number of CSSRule objects in the list. | 1 | 12 | 1 | 1 | 18 | 1 |
| The CSSStyleDeclaration interface is the base class for objects that represent CSS declaration blocks with different supported sets of CSS style information: | 1 | 12 | 1 | 1 | 18 | 1 |
@@iterator [Symbol.iterator] | 51 | 18 | 36 | 11 | 51 | 11 |
| The cssText property of the CSSStyleDeclaration interface returns or sets the text of the element's inline style declaration only. | 1 | 12 | 1 | 1 | 18 | 1 |
| The CSSStyleDeclaration.getPropertyPriority() method interface returns a string that provides all explicitly set priorities on the CSS property. | 1 | 12 | 1 | 1 | 18 | 1 |
| The CSSStyleDeclaration.getPropertyValue() method interface returns a string containing the value of a specified CSS property. | 1 | 12 | 1 | 1 | 18 | 1 |
| The CSSStyleDeclaration.item() method interface returns a CSS property name from a CSSStyleDeclaration by index. | 1 | 12 | 1 | 6 | 18 | 6 |
| The read-only property returns an integer that represents the number of style declarations in this CSS declaration block. | 1 | 12 | 1 | 6 | 18 | 6 |
| The CSSStyleDeclaration.parentRule read-only property returns a CSSRule that is the parent of this style block, e.g., a CSSStyleRule representing the style for a CSS selector. | 1 | 12 | 1 | 1 | 18 | 1 |
| The CSSStyleDeclaration.removeProperty() method interface removes a property from a CSS style declaration object. | 1 | 12 | 1 | 1 | 18 | 1 |
| The CSSStyleDeclaration.setProperty() method interface sets a new value for a property on a CSS style declaration object. | 1 | 12 | 1 | 6 | 18 | 6 |
| The CSSStyleRule interface represents a single CSS style rule. | 1 | 12 | 1 | 1 | 18 | 1 |
| The selectorText property of the CSSStyleRule interface gets and sets the selectors associated with the CSSStyleRule. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only style property of the CSSStyleRule interface contains a CSSStyleProperties object representing the properties list in this style rule's body. | 1 | 12 | 1 | 1 | 18 | 1 |
| 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. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only CSSStyleSheet property cssRules returns a live CSSRuleList which provides a real-time, up-to-date list of every CSS rule which comprises the stylesheet. Each item in the list is a CSSRule defining a single rule. | 1 | 12 | 1 | 1 | 18 | 1 |
| The CSSStyleSheet method deleteRule() removes a rule from the stylesheet object. | 1 | 12 | 1 | 1 | 18 | 1 |
| The CSSStyleSheet.insertRule() method inserts a new CSS rule into the current style sheet. | 1 | 12 | 1 | 1 | 18 | 1 |
insertRule (index parameter optional) `index` parameter is optional | 1 | 12 | 55 | 1 | 18 | 1 |
| The read-only CSSStyleSheet property ownerRule returns the CSSImportRule corresponding to the @import at-rule which imported the stylesheet into the document. If the stylesheet wasn't imported into the document using @import, the returned value is null. | 1 | 12 | 1 | 1 | 18 | 1 |
| The styleSheets read-only property of the Document interface returns a StyleSheetList of CSSStyleSheet objects, for stylesheets explicitly linked into or embedded in a document. | 1 | 12 | 1 | 4 | 18 | 3.2 |
| The read-only style property of the HTMLElement interface returns the inline style of an element in the form of a live CSSStyleProperties object. This object can be used to get and set the inline styles of an element. | 1 | 12 | 1 | 3 | 18 | 1 |
| The sheet read-only property of the HTMLLinkElement interface contains the stylesheet associated with that element. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only sheet property of the HTMLStyleElement interface contains the stylesheet associated with that element. | 1 | 12 | 1 | 1 | 18 | 1 |
| The MediaList interface represents the media queries of a stylesheet, e.g., those set using a link element's media attribute. | 1 | 12 | 1 | 1 | 18 | 1 |
| The appendMedium() method of the MediaList interface adds a media query to the list. If the media query is already in the collection, this method does nothing. | 1 | 12 | 1 | 1 | 18 | 1 |
| The deleteMedium() method of the MediaList interface removes from this MediaList the given media query. | 1 | 12 | 1 | 1 | 18 | 1 |
| The item() method of the MediaList interface returns the media query at the specified index, or null if the specified index doesn't exist. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only length property of the MediaList interface returns the number of media queries in the list. | 1 | 12 | 1 | 1 | 18 | 1 |
| The mediaText property of the MediaList interface is a stringifier that returns a string representing the MediaList as text, and also allows you to set a new MediaList. | 1 | 12 | 1 | 1 | 18 | 1 |
| The toString() stringifier method of the MediaList interface returns a string representing the object's values. The value is a comma-separated list of media values in the same format as the MediaList.mediaText property. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only sheet property of the ProcessingInstruction interface contains the stylesheet associated to the ProcessingInstruction. | 1 | 79 | 1 | 1 | 18 | 1 |
| The styleSheets read-only property of the ShadowRoot interface returns a StyleSheetList of CSSStyleSheet objects, for stylesheets explicitly linked into or embedded in a shadow tree. | 53 | 79 | 63 | 12.1 | 53 | 12.2 |
| An object implementing the StyleSheet interface represents a single style sheet. CSS style sheets will further implement the more specialized CSSStyleSheet interface. | 1 | 12 | 1 | 1 | 18 | 1 |
| The disabled property of the StyleSheet interface determines whether the style sheet is prevented from applying to the document. | 1 | 12 | 1 | 1 | 18 | 1 |
| The href property of the StyleSheet interface returns the location of the style sheet. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only media property of the StyleSheet interface contains a MediaList object representing the intended destination media for style information. | 1 | 12 | 1 | 1 | 18 | 1 |
| The ownerNode property of the StyleSheet interface returns the node that associates this style sheet with the document. | 1 | 12 | 1 | 1 | 18 | 1 |
| The parentStyleSheet property of the StyleSheet interface returns the style sheet, if any, that is including the given style sheet. | 1 | 12 | 1 | 1 | 18 | 1 |
| The title property of the StyleSheet interface returns the advisory title of the current style sheet. | 1 | 12 | 1 | 1 | 18 | 1 |
| The type property of the StyleSheet interface specifies the style sheet language for the given style sheet. | 1 | 12 | 1 | 1 | 18 | 1 |
| The StyleSheetList interface represents a list of CSSStyleSheet objects. An instance of this object can be returned by Document.styleSheets. | 1 | 12 | 1 | 1 | 18 | 1 |
| The item() method of the StyleSheetList interface returns a single CSSStyleSheet object. | 1 | 12 | 1 | 1 | 18 | 1 |
| The length read-only property of the StyleSheetList interface returns the number of CSSStyleSheet objects in the collection. | 1 | 12 | 1 | 1 | 18 | 1 |
- This browser only partially implements this feature
- This feature was removed in a later browser version (14.1)
- The `CSSGroupingRule` interface itself is not present, but many of the methods are available on various interfaces such as the `CSSMediaRule` and `CSSPageRule` interfaces.
- This browser only partially implements this feature
- This feature was removed in a later browser version (14.5)
- The `CSSGroupingRule` interface itself is not present, but many of the methods are available on various interfaces such as the `CSSMediaRule` and `CSSPageRule` interfaces.
- Before Firefox 20, `conditionText` could not be set.
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
Syntax
// Manipulating inline styles
el.style.setProperty('color', 'blue');
// Manipulating stylesheet rules
const sheet = document.styleSheets[0];
sheet.insertRule('.highlight { background: yellow; }', 0);Live demo
Insert a rule
Create a stylesheet at runtime and append a new rule through the CSS object model.
Use cases
Runtime theming
Inspect or update style rules when a design system needs coordinated visual changes at runtime.
Style-aware logic
Read computed values when layout behavior depends on actual rendered styles rather than source declarations.
Cautions
- Direct CSSOM manipulation can make styling logic harder to trace than class-based state changes.
- Be careful about performance when reading computed styles in tight loops or interaction-heavy code.
Accessibility
- Dynamic style changes should preserve contrast, focus visibility, and reduced-motion preferences.
- If style inspection drives layout decisions, make sure the resulting UI still keeps a sensible reading order.
Related links
Powered by web-features