StyleSheetList
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
TheStyleSheetList interface represents a list ofCSSStyleSheet objects. An instance of this object can be returned byDocument.styleSheets.
It is an array-like object but can't be iterated over usingArray methods. However it can be iterated over in a standardfor loop over its indices, or converted to anArray.
Note:Typically list interfaces likeStyleSheetList wrap aroundArray types, so you can useArray methods on them.This is not the case here forhistorical reasons.However, you can convertStyleSheetList to anArray in order to use those methods (see the example below).
Instance properties
StyleSheetList.lengthRead onlyReturns the number of
CSSStyleSheetobjects in the collection.
Instance methods
StyleSheetList.item()Returns the
CSSStyleSheetobject at the index passed in, ornullif no item exists for that index.
Examples
Get CSSStyleSheet objects with for loop
for (const styleSheet of document.styleSheets) { console.log(styleSheet); // A CSSStyleSheet object}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, ); return undefined; } }) .filter(Boolean) .join("\n");Specifications
| Specification |
|---|
| CSS Object Model (CSSOM) # the-stylesheetlist-interface |