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: 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, 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

Specification
CSS Object Model (CSSOM) # the-stylesheetlist-interface

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`StyleSheetList`	1	12	1	≤12.1	1	18	4	≤12.1	1	1.0	4.4
`item`	1	12	1	≤12.1	1	18	4	≤12.1	1	1.0	4.4
`length`	1	12	1	≤12.1	1	18	4	≤12.1	1	1.0	4.4

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList