CSSStyleRule: style property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The read-only style property is a CSSStyleProperties object that represents the inline styles of a style rule (CSSStyleRule).
Note that properties that are present on the object for all CSS properties supported by the browser.
The properties that are not defined inline in the corresponding CSS declaration are set to the empty string ("").
Value
Note:
Earlier versions of the specification returned a CSSStyleDeclaration, which is now the base class of CSSStyleProperties.
See the browser compatibility table for browser support information.
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
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-cssstylerule-style |
Browser compatibility
Loading…