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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
StyleSheetList
1
12
31
4
Yes
1
Yes
Yes
31
Yes
1
Yes
item
1
12
31
4
Yes
1
Yes
Yes
31
Yes
1
Yes
length
1
12
31
4
Yes
1
Yes
Yes
31
Yes
1
Yes

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