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.lengthRead 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

let i, styleSheet, styleSheets, styleSheetsNo;
i = 0;
styleSheets = document.styleSheets;
styleSheetsNo = styleSheets.length;

for (i; i < styleSheetsNo; i++) {
  styleSheet = 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