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.

Properties

StyleSheetList.length Read only: Returns the number of CSSStyleSheet objects in the collection.

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
Unknown specification # the-stylesheetlist-interface

Browser compatibility

BCD tables only load in the browser