CSSStyleSheet: cssRules 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-onlyCSSStyleSheet propertycssRules returns a liveCSSRuleList whichprovides a real-time, up-to-date list of every CSS rule which comprises thestylesheet. Each item in the list is aCSSRule defining a singlerule.
Value
A live-updatingCSSRuleList containing each of the CSS rules making upthe stylesheet. Each entry in the rule list is aCSSRule objectdescribing one rule making up the stylesheet.
Examples
Individual rules within the stylesheet can then be accessed by index:
js
const ruleList = document.styleSheets[0].cssRules;for (let i = 0; i < ruleList.length; i++) { processRule(ruleList[i]);}Rules can also be accessed usingfor...of:
js
const ruleList = document.styleSheets[0].cssRules;for (const rule of ruleList) { processRule(rule);}However, becauseCSSRule is not a proper array, you can't useforEach().
Specifications
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-cssstylesheet-cssrules |