The StyleSheetList interface represents a list of CSSStyleSheet objects. An instance of this object can be returned by Document.styleSheets.
It is an array-like object but can't be iterated over using Array methods. However it can be iterated over in a standard for loop over its indices, or converted to an Array.
Note: This interface was an attempt to create an unmodifiable list and only continues to be supported to not break code that's already using it. Modern APIs use types that wrap around ECMAScript array types instead, so you can treat them like ECMAScript arrays, and at the same time impose additional semantics on their usage (such as making their items read-only).
Instance properties
StyleSheetList.length Read only
-
Returns the number of CSSStyleSheet objects in the collection.
Instance methods
-
StyleSheetList.item()
-
Returns the CSSStyleSheet object at the index passed in, or null if no item exists for that index.
Examples
Get CSSStyleSheet objects with for loop
const styleSheet = [];
const styleSheets = document.styleSheets;
for (let i = 0; i < styleSheets.length; i++) {
styleSheet.push(styleSheets[i]);
}
Get all CSS rules for the document using Array methods
const allCSS = [...document.styleSheets]
.map((styleSheet) => {
try {
return [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
} catch (e) {
console.log(
"Access to stylesheet %s is denied. Ignoring…",
styleSheet.href,
);
}
})
.filter(Boolean)
.join("\n");
Specifications
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
StyleSheetList |
1 |
12 |
1 |
4 |
≤12.1 |
1 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
item |
1 |
12 |
1 |
4 |
≤12.1 |
1 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
length |
1 |
12 |
1 |
4 |
≤12.1 |
1 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |