StyleSheetList.length — Eigenschaft · JavaScript-Referenz

Signatur

get StyleSheetList.length

Beschreibung

Die schreibgeschützte Eigenschaft length liefert die Anzahl der Stylesheets, die eine StyleSheetList enthält. Die wichtigste Quelle für eine solche Liste ist document.styleSheets. Außerdem gibt es shadowRoot.styleSheets. Gezählt werden alle Stylesheets, die über <link rel="stylesheet"> und <style> eingebunden sind.

Typische Einsatzfälle sind das Durchlaufen aller Stylesheets mit einer klassischen for-Schleife, die Prüfung, ob schon Stylesheets geladen sind, und Diagnose-Werkzeuge, die Regeln oder Quellen von Stylesheets auswerten. Gültige Indizes für item() bzw. den Zugriff mit eckigen Klammern reichen von 0 bis length - 1.

Die Liste ist live: Fügt man ein <style>-Element in das Dokument ein oder entfernt eines, ändert sich length sofort. Wer also in einer Schleife Stylesheets hinzufügt oder entfernt, sollte die Länge vorher zwischenspeichern oder die Liste mit Array.from() in ein festes Array kopieren.

Rückgabewert

Typ

number

Beschreibung

Eine nicht-negative ganze Zahl: die aktuelle Anzahl der Stylesheets in der Liste. Ist die Liste leer, ist der Wert 0.

Beispiele

Anzahl der Stylesheets im Dokument ausgeben

const anzahl = document.styleSheets.length;
console.log(`Das Dokument hat ${anzahl} Stylesheet(s).`);

Das Dokument hat 3 Stylesheet(s).

Alle Stylesheets mit Quelle auflisten

const sheets = document.styleSheets;
for (let i = 0; i < sheets.length; i++) {
  const sheet = sheets[i];
  // href ist null bei eingebetteten <style>-Elementen
  console.log(i, sheet.href ?? '(inline)', sheet.disabled ? 'deaktiviert' : 'aktiv');
}

0 https://example.com/main.css aktiv 1 (inline) aktiv

Live-Verhalten beim Einfügen eines <style>-Elements

const vorher = document.styleSheets.length;

const style = document.createElement('style');
style.textContent = 'body { background: #fafafa; }';
document.head.append(style);

console.log(vorher, '→', document.styleSheets.length);

style.remove();
console.log('nach remove():', document.styleSheets.length);

2 → 3 nach remove(): 2

Stylesheets eines Shadow-DOM zählen

const host = document.createElement('div');
document.body.append(host);
const shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = '<style>p { color: teal; }</style><p>Hallo</p>';

console.log(shadow.styleSheets.length);
// adoptedStyleSheets werden hier NICHT mitgezählt
shadow.adoptedStyleSheets = [new CSSStyleSheet()];
console.log(shadow.styleSheets.length);

1 1

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie document.styleSheets.length = 0 wird ignoriert (im Strict Mode folgt ein TypeError). Stylesheets entfernt man, indem man das zugehörige <style>- bzw. <link>-Element löscht.
Live-Liste: Werden in einer Schleife Stylesheets hinzugefügt oder entfernt, ändert sich length während des Durchlaufs. In diesem Fall vorher Array.from(document.styleSheets) verwenden.
Constructable Stylesheets: Stylesheets in document.adoptedStyleSheets bzw. shadowRoot.adoptedStyleSheets werden nicht gezählt.
Ladezeitpunkt: Ein <link>-Stylesheet zählt oft erst mit, wenn es geladen ist. Ein sehr frühes Skript kann deshalb einen zu kleinen Wert sehen. Sicherer ist es, auf load bzw. DOMContentLoaded zu warten.
Deaktivierte Stylesheets (disabled = true) werden weiterhin gezählt. Alternative Stylesheets werden je nach Browser unterschiedlich behandelt.
Die Eigenschaft wird von allen gängigen Browsern seit Langem unterstützt.

Siehe auch

StyleSheetList StyleSheetList.item() Document.styleSheets CSSStyleSheet Document.adoptedStyleSheets StyleSheet.disabled CSSPerspective.length