Document.styleSheets — Eigenschaft · JavaScript-Referenz

Signatur

get Document.styleSheets

Beschreibung

Die Eigenschaft document.styleSheets gibt eine lebende StyleSheetList zurück. Sie enthält für jedes <link rel="stylesheet">-Element und jedes <style>-Element des Dokuments ein CSSStyleSheet-Objekt, und zwar in der Reihenfolge, in der die Elemente im Dokument stehen. Die Liste ändert sich automatisch, sobald Stylesheets hinzukommen oder entfernt werden.

Gebraucht wird die Eigenschaft vor allem, wenn man CSS zur Laufzeit untersuchen oder ändern will: Regeln auslesen (cssRules), neue Regeln einfügen (insertRule()), ganze Stylesheets abschalten (disabled) oder für Debugging- und Theming-Werkzeuge alle aktiven Stile auflisten.

Nicht enthalten sind per Konstruktor erzeugte Stylesheets (new CSSStyleSheet()), die über document.adoptedStyleSheets eingebunden werden, sowie Inline-Stile im style-Attribut. Stylesheets, die per @import geladen werden, stehen nicht direkt in der Liste, sondern sind über die zugehörige CSSImportRule.styleSheet erreichbar.

Rückgabewert

Typ

StyleSheetList

Beschreibung

Eine lebende, array-ähnliche Liste von CSSStyleSheet-Objekten mit length, Indexzugriff und item(index). Sie lässt sich iterieren, z. B. mit for...of oder Array.from().

Beispiele

Alle Stylesheets des Dokuments auflisten

// Überblick über alle eingebundenen Stylesheets
for (const sheet of document.styleSheets) {
  console.log({
    href: sheet.href ?? '(eingebettet)',
    owner: sheet.ownerNode?.nodeName,
    media: sheet.media.mediaText || 'all',
    disabled: sheet.disabled
  });
}
console.log(`Anzahl: ${document.styleSheets.length}`);

{ href: 'https://example.com/main.css', owner: 'LINK', media: 'all', disabled: false } { href: '(eingebettet)', owner: 'STYLE', media: 'all', disabled: false } Anzahl: 2

CSS-Regeln sicher auslesen (auch bei fremden Stylesheets)

const collectSelectors = () => {
  const selectors = [];
  for (const sheet of document.styleSheets) {
    try {
      for (const rule of sheet.cssRules) {
        if (rule instanceof CSSStyleRule) selectors.push(rule.selectorText);
      }
    } catch (err) {
      // Fremd-Origin-Stylesheet ohne CORS → SecurityError
      console.warn('Kein Zugriff auf', sheet.href, err.name);
    }
  }
  return selectors;
};

console.log(collectSelectors());

Kein Zugriff auf https://cdn.example.org/lib.css SecurityError ['body', '.btn', '.btn:hover', ...]

Regel zur Laufzeit einfügen und Stylesheet umschalten

// Eigenes <style>-Element anlegen, damit keine fremden Sheets verändert werden
const styleEl = document.createElement('style');
styleEl.id = 'theme-dark';
document.head.append(styleEl);

// Die Liste ist live: das neue Sheet ist sofort enthalten
const sheet = [...document.styleSheets].find(s => s.ownerNode === styleEl);
sheet.insertRule('body { background: #111; color: #eee; }', sheet.cssRules.length);

// Dark-Mode per Knopf ein- und ausschalten
document.querySelector('#toggle-theme')?.addEventListener('click', () => {
  sheet.disabled = !sheet.disabled;
});

console.log(sheet.cssRules.length);

1

// Wichtig · Fallstricke

Cross-Origin-Sperre: Wird auf cssRules eines Stylesheets von einer anderen Origin ohne CORS zugegriffen (kein crossorigin-Attribut bzw. kein passender Access-Control-Allow-Origin-Header), wirft der Browser einen SecurityError. Den Zugriff darum immer mit try...catch absichern.
Lebende Liste: Die StyleSheetList aktualisiert sich selbst. Wer beim Durchlaufen Stylesheets hinzufügt oder entfernt, sollte vorher mit Array.from(document.styleSheets) eine feste Kopie anlegen.
Ladezeitpunkt: Ein gerade eingefügtes <link> steht zwar in der Liste, seine Regeln sind aber erst nach dem load-Event des Elements verfügbar.
Die Liste ist schreibgeschützt; Zuweisungen an document.styleSheets haben keine Wirkung. Konstruierte Stylesheets gehören in document.adoptedStyleSheets, Shadow-DOM-Stile in shadowRoot.styleSheets.
Stylesheets mit rel="alternate stylesheet" stehen ebenfalls in der Liste, sind aber standardmäßig deaktiviert (disabled === true).
Wird in allen modernen Browsern unterstützt. Die Iteration mit for...of setzt ES2015-Unterstützung voraus.

Siehe auch

StyleSheetList CSSStyleSheet CSSStyleSheet.prototype.insertRule() CSSStyleSheet.cssRules Document.adoptedStyleSheets ShadowRoot.styleSheets Window.getComputedStyle()