Document: styleSheets property

Value

The returned list is ordered as follows:

• StyleSheets retrieved from Link headers are placed first, sorted in header order.
• StyleSheets retrieved from the DOM are placed after, sorted in tree order.

Examples

Retrieving a specific stylesheet by its title

function getStyleSheet(uniqueTitle) {
  for (const sheet of document.styleSheets) {
    if (sheet.title === uniqueTitle) {
      return sheet;
    }
  }
}

Accessing rules in the stylesheet

You can access these stylesheets and their rules individually using the stylesheet, style, and CSSRule objects, as demonstrated in this example, which prints out all of the style rule selectors to the console.

for (const styleSheet of document.styleSheets) {
  for (const rule of styleSheet.cssRules) {
    console.log(`${rule.selectorText}\n`);
  }
}

For a document with a single stylesheet in which the following three rules are defined:

body {
  background-color: darkblue;
}
p {
  font-family: "Arial";
  font-size: 10pt;
  margin-left: 0.125in;
}
#lumpy {
  display: none;
}

This script outputs the following:

BODY
P
#LUMPY

Specifications

Browser compatibility