JavaScript Document styleSheets Property

What You’ll Learn

Document.styleSheets is a read-only instance property that returns every CSS stylesheet linked or embedded in the document. Learn how to count sheets, find one by title, read cssRules, compare with adoptedStyleSheets, and five examples with try-it labs.

Introduction

Every styled page loads CSS from <link rel="stylesheet"> tags, inline <style> blocks, and sometimes HTTP Link headers. When JavaScript needs to inspect those stylesheets programmatically, document.styleSheets is the standard entry point.

MDN: the styleSheets read-only property returns a StyleSheetList of CSSStyleSheet objects, for stylesheets explicitly linked into or embedded in a document.

Related Document tutorials: adoptedStyleSheets, links, scripts, Document constructor.

Understanding Document.styleSheets

A read-only instance property from the CSS Object Model.

• Value — StyleSheetList of CSSStyleSheet items (MDN).
• Includes — linked external sheets and embedded <style> blocks.
• Order — Link-header sheets first, then DOM sheets in tree order (MDN).
• Access — length, index, or for...of loop.
• Status — Baseline Widely available (since July 2015, MDN).

📝 Syntax

document.styleSheets

Value

A StyleSheetList of CSSStyleSheet objects (MDN).

MDN: find sheet by title

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

⚖️ Stylesheet-Related Document APIs

Examples Gallery

Examples follow MDN Document: styleSheets. Each includes a try-it lab you can run in the browser.

const count = document.styleSheets.length;
console.log("Stylesheet count:", count);

Stylesheet count: 2

for (const sheet of document.styleSheets) {
  console.log(sheet.href || "inline");
}

inline
https://example.com/theme.css

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

const sheet = getStyleSheet("Main");
console.log(sheet ? "Found Main" : "Not found");

Found Main

for (const styleSheet of document.styleSheets) {
  try {
    for (const rule of styleSheet.cssRules) {
      console.log(rule.selectorText);
    }
  } catch (e) {
    console.log("(cross-origin sheet — cssRules blocked)");
  }
}

BODY
P
#LUMPY

console.log({
  styleSheets: document.styleSheets.length,
  adoptedStyleSheets: document.adoptedStyleSheets.length
});

{ styleSheets: 2, adoptedStyleSheets: 0 }

🚀 Common Use Cases

• Debug CSS loading — count how many sheets loaded on a page.
• Theme inspection — find alternate sheets by title.
• DevTools-style tools — list selectors from inline CSS safely.
• Performance audits — inventory external href URLs.
• Teaching CSSOM — connect DOM <link> to live sheets.
• Pair with adoptedStyleSheets — compare static vs dynamic CSS.

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Cross-origin stylesheets block cssRules access (SecurityError) — use try/catch.
• Order: Link-header sheets first, then DOM sheets in tree order (MDN).
• Does not include constructable sheets until they appear in the document model appropriately; use adoptedStyleSheets for JS-injected sheets.
• Related: adoptedStyleSheets, links, Document constructor.

💡 Best Practices