CSSStyleRule: styleMap property

The styleMap read-only property of the CSSStyleRule interface returns a StylePropertyMap object which provides access to the rule's property-value pairs.

Value

Example

The following example shows styleMap being used to modify a style using the StylePropertyMap.set() method.

js
const stylesheet = document.styleSheets[0];

Object.values(stylesheet.cssRules).forEach((block) => {
  if (block.selectorText === "button") {
    block.styleMap.set("--mainColor", "black");
  }
});

Specifications

Specification
CSS Typed OM Level 1
# dom-cssstylerule-stylemap

Browser compatibility

desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
styleMap