StyleSheet.parentStyleSheet — Eigenschaft · JavaScript-Referenz

Signatur

StyleSheet.parentStyleSheet

Beschreibung

Die schreibgeschützte Eigenschaft parentStyleSheet der Schnittstelle StyleSheet verweist auf das übergeordnete Stylesheet. Das gilt, wenn das aktuelle Stylesheet über eine @import-Regel in ein anderes Stylesheet eingebunden wurde. Stylesheets, die direkt über <link rel="stylesheet"> oder <style> ins Dokument kommen, haben kein Eltern-Stylesheet. Bei ihnen ist der Wert null.

Die Eigenschaft ist nützlich, um die Import-Hierarchie von CSS-Dateien zur Laufzeit nachzuvollziehen. Das hilft bei Debugging-Werkzeugen, beim Auswerten von Stilquellen oder beim Finden des Stylesheets der obersten Ebene (und damit seines ownerNode).

Ein importiertes Stylesheet erreicht man über CSSImportRule.styleSheet. Dessen parentStyleSheet zeigt dann wieder auf das Stylesheet, das die @import-Regel enthält. Die Eigenschaft ist verwandt mit CSSRule.parentStyleSheet, aber nicht dasselbe. Letztere liefert das Stylesheet, zu dem eine einzelne Regel gehört.

Rückgabewert

Typ

CSSStyleSheet | null

Beschreibung

Das Stylesheet, das dieses Stylesheet per @import einbindet, oder null, wenn es direkt im Dokument eingebunden ist.

Beispiele

Stylesheets der obersten Ebene prüfen

// Alle direkt eingebundenen Stylesheets haben kein Eltern-Stylesheet
for (const sheet of document.styleSheets) {
  console.log(sheet.href ?? '(inline)', sheet.parentStyleSheet);
}

https://example.com/main.css null (inline) null

Importierte Stylesheets und ihr Eltern-Stylesheet

// main.css enthält: @import url("theme.css");
const main = [...document.styleSheets].find(s => s.href?.endsWith('main.css'));

for (const rule of main.cssRules) {
  if (rule instanceof CSSImportRule && rule.styleSheet) {
    const imported = rule.styleSheet;
    console.log(imported.href);
    console.log(imported.parentStyleSheet === main);
  }
}

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

Stylesheet der obersten Ebene und sein DOM-Knoten finden

const getRootSheet = (sheet) => {
  let current = sheet;
  while (current.parentStyleSheet) {
    current = current.parentStyleSheet;
  }
  return current;
};

// Beispiel: tief importiertes Stylesheet
const main = document.styleSheets[0];
const importRule = [...main.cssRules].find(r => r instanceof CSSImportRule);
const nested = importRule?.styleSheet;

if (nested) {
  const root = getRootSheet(nested);
  console.log(root === main);        // true
  console.log(root.ownerNode.tagName); // LINK oder STYLE
}

true LINK

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung an parentStyleSheet wird ignoriert. Im Strict Mode löst sie einen TypeError aus.
Bei importierten Stylesheets ist ownerNode immer null. Den zugehörigen DOM-Knoten findet man nur über das Stylesheet der obersten Ebene (siehe Beispiel 3).
CSSImportRule.styleSheet kann null sein, etwa wenn der Import fehlschlug oder die Medienabfrage nicht zutrifft und der Browser das Stylesheet nicht geladen hat. Diesen Fall immer abfangen.
Bei Stylesheets von einem anderen Ursprung (Cross-Origin) ohne CORS-Freigabe wirft der Zugriff auf cssRules einen SecurityError. Dann lassen sich auch keine importierten Stylesheets ermitteln.
Stylesheets, die mit new CSSStyleSheet() erzeugt werden (Constructable Stylesheets), haben immer parentStyleSheet === null. Sie erlauben ohnehin kein @import.
Die Eigenschaft wird seit vielen Jahren von allen gängigen Browsern unterstützt.

Siehe auch

StyleSheet CSSStyleSheet CSSImportRule.styleSheet StyleSheet.ownerNode CSSRule.parentStyleSheet Document.styleSheets StyleSheet.type