JavaScript Document styleSheets Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word STYLESHEETS

Definition

Document.styleSheets is a read-only StyleSheetList of CSSStyleSheet objects for stylesheets linked into or embedded in the document (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.styleSheets. Start with this line.

JavaScript
document.styleSheets
CallWhat it does
document.styleSheetsPrimary signature.

Built into the browser. Read or assign document.styleSheets — no import required.

Library declarations
JavaScript
document.styleSheets

Parameters

ParameterDescription
styleSheetsRequired. Live list of document stylesheets
CSSStyleSheetRequired. One linked or embedded sheet
cssRulesOptional. Rule list (same-origin only)
SetterOptional. Read-only property

Return Value

Return ValueDescription
*The current value of document.styleSheets.

JavaScript Examples

Example 1 — Count styleSheets

Read how many linked or embedded stylesheets the document has.

JavaScript
console.log(document.styleSheets.length);

for (const sheet of document.styleSheets) {
  console.log(sheet.href || "(inline)", sheet.title || "");
}
Try It Yourself

How It Works

  1. Read length. Counts linked and embedded document sheets.
  2. Loop the list. Each item is a CSSStyleSheet.
  3. Check href. External sheets have a URL; <style> often has null.
  4. Check title. Optional author label used by legacy set APIs.

Example 2 — Find a Sheet by Title

MDN-style helper — return the stylesheet whose title matches.

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

const found = getStyleSheet("Demo");
console.log(found ? "found" : "not found");
Try It Yourself

How It Works

  1. Loop every sheet. Titles are optional strings on each sheet.
  2. Compare exactly. Use === with the unique title you set in HTML.
  3. Return early. First match wins — keep titles unique.
  4. Handle misses. If nothing matches, the function returns undefined.

Example 3 — Read cssRules Safely

Print selector text from same-origin sheets; skip blocked cross-origin sheets.

JavaScript
for (const styleSheet of document.styleSheets) {
  try {
    for (const rule of styleSheet.cssRules) {
      if (rule.selectorText) {
        console.log(rule.selectorText);
      }
    }
  } catch (err) {
    console.log("blocked:", styleSheet.href);
  }
}
Try It Yourself

How It Works

  1. Outer loop. Visit each stylesheet in document order.
  2. Try cssRules. Same-origin sheets expose their rule list.
  3. Catch errors. Cross-origin sheets often throw SecurityError.
  4. Log selectors. selectorText is handy for style rules (MDN demo idea).
Compatibility

Browser Support

Document.styleSheets is Baseline Widely available on MDN (since July 2015). It is a standard CSSOM property across modern browsers.

✓ Baseline · Widely available

Document.styleSheets

Read-only StyleSheetList of linked and embedded CSSStyleSheet objects.

98% Modern browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
styleSheets Excellent

Bottom line: Safe for production. Remember: reading cssRules on cross-origin sheets may throw — use try/catch.

Frequently Asked Questions

A read-only StyleSheetList of CSSStyleSheet objects for stylesheets explicitly linked into or embedded in the document (MDN).
No. MDN marks Document.styleSheets as Baseline Widely available (since July 2015). It is part of the standard CSS Object Model (CSSOM).
MDN: Link header stylesheets come first (header order), then DOM stylesheets (tree order).
Loop document.styleSheets and compare sheet.title to your target name (MDN example pattern).
Only same-origin stylesheets. Cross-origin sheets may throw a SecurityError when accessing cssRules — wrap reads in try/catch.
document.styleSheets lists linked and embedded document stylesheets. document.adoptedStyleSheets holds constructable stylesheets you attach via JavaScript.

Next: timeline

Learn the document’s default animation timeline.

timeline tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document scrollingElement Property JavaScript Document timeline Property