StyleSheetList
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
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:
Typically list interfaces like StyleSheetList
wrap around Array
types, so you can use Array
methods on them.
This is not the case here for historical reasons.
However, you can convert StyleSheetList
to an Array
in order to use those methods (see the example below).
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, ornull
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
Specification |
---|
CSS Object Model (CSSOM) # the-stylesheetlist-interface |
Browser compatibility
BCD tables only load in the browser