Widely available Useful for advanced tooling, theming, and computed layout logic. For ordinary UI state changes, classes and custom properties are often simpler.

CSS object model

The CSS interface holds useful CSS-related methods. No objects with this interface are implemented: it contains only static methods and is therefore a utilitarian interface.

CSSOMStylesJavaScript

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
CSS
28
12
22
9
28
9
CSSConditionRule

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
conditionText

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
CSSGroupingRule

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
cssRules

The cssRules property of the CSSGroupingRule interface returns a CSSRuleList containing a collection of CSSRule objects.
45
12
20
3
45
2
deleteRule

The deleteRule() method of the CSSGroupingRule interface removes a CSS rule from a list of child CSS rules.
45
12
20
3
45
2
insertRule

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
CSSMediaRule

The CSSMediaRule interface represents a single CSS @media rule.
1
12
1
3
18
1
media

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
CSSPageDescriptors

The CSSPageDescriptors interface represents a CSS declaration block for an @page at-rule.
129
26
26
margin

A string representing the margin property of the corresponding @page at-rule.
129
26
26
margin-bottom

A string representing the margin-bottom property of the corresponding @page at-rule.
129
26
26
margin-left

A string representing the margin-left property of the corresponding @page at-rule.
129
26
26
margin-right

A string representing the margin-right property of the corresponding @page at-rule.
129
26
26
margin-top

A string representing the margin-top property of the corresponding @page at-rule.
129
26
26
marginBottom
129
26
26
marginLeft
129
26
26
marginRight
129
26
26
marginTop
129
26
26
page-orientation
Experimental

A string representing the page-orientation property of the corresponding @page at-rule.
129
pageOrientation
Experimental
129
size

A string representing the size property of the corresponding @page at-rule.
129
26
26
CSSPageRule

CSSPageRule represents a single CSS @page rule.
1
12
19
3
18
1
selectorText

The selectorText property of the CSSPageRule interface gets and sets the selectors associated with the CSSPageRule.
1
12
110
3
18
1
style

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
CSSRule

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
cssText

The cssText property of the CSSRule interface returns the actual text of a CSSStyleSheet style-rule.
1
12
1
1
18
1
parentRule

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
parentStyleSheet

The parentStyleSheet property of the CSSRule interface returns the StyleSheet object in which the current rule is defined.
1
12
1
1
18
1
CSSRuleList

A CSSRuleList represents an ordered collection of read-only CSSRule objects.
1
12
1
1
18
1
item

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
length

The length property of the CSSRuleList interface returns the number of CSSRule objects in the list.
1
12
1
1
18
1
CSSStyleDeclaration

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
cssText

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
getPropertyPriority

The CSSStyleDeclaration.getPropertyPriority() method interface returns a string that provides all explicitly set priorities on the CSS property.
1
12
1
1
18
1
getPropertyValue

The CSSStyleDeclaration.getPropertyValue() method interface returns a string containing the value of a specified CSS property.
1
12
1
1
18
1
item

The CSSStyleDeclaration.item() method interface returns a CSS property name from a CSSStyleDeclaration by index.
1
12
1
6
18
6
length

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
parentRule

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
removeProperty

The CSSStyleDeclaration.removeProperty() method interface removes a property from a CSS style declaration object.
1
12
1
1
18
1
setProperty

The CSSStyleDeclaration.setProperty() method interface sets a new value for a property on a CSS style declaration object.
1
12
1
6
18
6
CSSStyleRule

The CSSStyleRule interface represents a single CSS style rule.
1
12
1
1
18
1
selectorText

The selectorText property of the CSSStyleRule interface gets and sets the selectors associated with the CSSStyleRule.
1
12
1
1
18
1
style

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
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.
1
12
1
1
18
1
cssRules

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
deleteRule

The CSSStyleSheet method deleteRule() removes a rule from the stylesheet object.
1
12
1
1
18
1
insertRule

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
ownerRule

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
styleSheets

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
style

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
sheet

The sheet read-only property of the HTMLLinkElement interface contains the stylesheet associated with that element.
1
12
1
1
18
1
sheet

The read-only sheet property of the HTMLStyleElement interface contains the stylesheet associated with that element.
1
12
1
1
18
1
MediaList

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
appendMedium

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
deleteMedium

The deleteMedium() method of the MediaList interface removes from this MediaList the given media query.
1
12
1
1
18
1
item

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
length

The read-only length property of the MediaList interface returns the number of media queries in the list.
1
12
1
1
18
1
mediaText

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
toString

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
sheet

The read-only sheet property of the ProcessingInstruction interface contains the stylesheet associated to the ProcessingInstruction.
1
79
1
1
18
1
styleSheets

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
StyleSheet

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
disabled

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
href

The href property of the StyleSheet interface returns the location of the style sheet.
1
12
1
1
18
1
media

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
ownerNode

The ownerNode property of the StyleSheet interface returns the node that associates this style sheet with the document.
1
12
1
1
18
1
parentStyleSheet

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
title

The title property of the StyleSheet interface returns the advisory title of the current style sheet.
1
12
1
1
18
1
type

The type property of the StyleSheet interface specifies the style sheet language for the given style sheet.
1
12
1
1
18
1
StyleSheetList

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
item

The item() method of the StyleSheetList interface returns a single CSSStyleSheet object.
1
12
1
1
18
1
length

The length read-only property of the StyleSheetList interface returns the number of CSSStyleSheet objects in the collection.
1
12
1
1
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.1)
Implementation note
  • The `CSSGroupingRule` interface itself is not present, but many of the methods are available on various interfaces such as the `CSSMediaRule` and `CSSPageRule` interfaces.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.5)
Implementation note
  • The `CSSGroupingRule` interface itself is not present, but many of the methods are available on various interfaces such as the `CSSMediaRule` and `CSSPageRule` interfaces.
Notes 1 item(s)
Implementation note
  • Before Firefox 20, `conditionText` could not be set.
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled

Syntax

JAVASCRIPT 
// 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.

PreviewFullscreen

Replace a rule

Swap rule text at runtime without editing an inline style attribute.

PreviewFullscreen

Inspect rules

Read cssRules to show how many runtime rules are currently active.

PreviewFullscreen

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