CSSStyleRule: style property

Value

A CSSStyleProperties object.

Although the style property itself is read-only in the sense that you can't replace the CSSStyleProperties object, you can still assign to the style property directly, which is equivalent to assigning to its cssText property. You can also modify the CSSStyleProperties object using the setProperty() and removeProperty() methods.

Examples

Getting the styles for a style rule

The CSS below defines the style rule for the h1 selector, which is represented in code by a CSSStyleRule instance. The declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces), which is represented in code by the style property.

h1 {
  color: pink;
}

Assuming the above style rule is the first rule in the document, it will be the first CSSRule returned by document.styleSheets[0].cssRules. myRules[0].style returns a CSSStyleProperties object representing the declarations defined for h1.

const myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].style); // a CSSStyleProperties representing the declarations on the h1.

Specifications

Browser compatibility