StyleSheetList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Das StyleSheetList Interface repräsentiert eine Liste von CSSStyleSheet Objekten. Eine Instanz dieses Objekts kann von Document.styleSheets zurückgegeben werden.

Es ist ein array-ähnliches Objekt, kann aber nicht mit Array Methoden durchlaufen werden. Es kann jedoch in einer Standardschleife mit for über seine Indizes durchlaufen oder in ein Array umgewandelt werden.

Hinweis: Typischerweise umfassen Listen-Interfaces wie StyleSheetList Array Typen, sodass Sie Array-Methoden auf ihnen verwenden können. Dies ist hier aus historischen Gründen nicht der Fall. Sie können StyleSheetList jedoch in ein Array umwandeln, um diese Methoden zu verwenden (siehe das Beispiel unten).

Instanz-Eigenschaften

StyleSheetList.length Schreibgeschützt

Gibt die Anzahl der CSSStyleSheet Objekte in der Sammlung zurück.

Instanz-Methoden

StyleSheetList.item()

Gibt das CSSStyleSheet Objekt an dem übergebenen Index zurück oder null, wenn kein Element für diesen Index existiert.

Beispiele

CSSStyleSheet Objekte mit einer for-Schleife abrufen

js
const styleSheet = [];
const styleSheets = document.styleSheets;

for (let i = 0; i < styleSheets.length; i++) {
  styleSheet.push(styleSheets[i]);
}

Alle CSS-Regeln für das Dokument mit Array-Methoden abrufen

js
const allCSS = [...document.styleSheets]
  .map((styleSheet) => {
    try {
      return [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
    } catch (e) {
      console.log(
        "Access to stylesheet %s is denied. Ignoring…",
        styleSheet.href,
      );
    }
  })
  .filter(Boolean)
  .join("\n");

Spezifikationen

Specification
CSS Object Model (CSSOM)
# the-stylesheetlist-interface

Browser-Kompatibilität

BCD tables only load in the browser