StyleSheetList
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, ornull
if no item exists for that index.
Examples
Get CSSStyleSheet objects with for loop
js
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
js
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