StyleSheet.ownerNode — Eigenschaft · JavaScript-Referenz

Signatur

StyleSheet.ownerNode

Beschreibung

Die schreibgeschützte Eigenschaft ownerNode des StyleSheet-Interfaces liefert den DOM-Knoten, über den ein Stylesheet ins Dokument eingebunden wurde. In HTML ist das typischerweise ein HTMLLinkElement (<link rel="stylesheet">) oder ein HTMLStyleElement (<style>). In XML-Dokumenten kann es auch eine ProcessingInstruction (<?xml-stylesheet ?>) sein.

Nützlich ist die Eigenschaft, wenn du über document.styleSheets iterierst und herausfinden willst, woher ein Stylesheet stammt – etwa um es anhand von id, data-*-Attributen oder media zu identifizieren, das zugehörige Element zu entfernen oder ein Theme umzuschalten.

Gibt es keinen besitzenden Knoten, ist der Wert null. Das betrifft vor allem per @import eingebundene Stylesheets (hier ist stattdessen CSSStyleSheet.ownerRule gesetzt) sowie per new CSSStyleSheet() erzeugte, konstruierte Stylesheets, die über document.adoptedStyleSheets eingebunden werden.

Rückgabewert

Typ

Element | ProcessingInstruction | null

Beschreibung

Der Knoten, der das Stylesheet einbindet (z. B. HTMLLinkElement oder HTMLStyleElement), oder null bei importierten bzw. konstruierten Stylesheets.

Beispiele

Herkunft aller Stylesheets auflisten

// Für jedes Stylesheet das einbindende Element ausgeben
for (const sheet of document.styleSheets) {
  const node = sheet.ownerNode;
  if (!node) {
    console.log('Kein ownerNode (z. B. @import):', sheet.href);
    continue;
  }
  console.log(node.nodeName, node.id || '(ohne id)', sheet.href ?? 'inline');
}

LINK main-css https://example.com/css/main.css STYLE (ohne id) inline

Stylesheet über data-Attribut finden und Theme umschalten

// HTML: <link rel="stylesheet" href="dark.css" data-theme="dark">
const setThemeEnabled = (theme, enabled) => {
  const sheet = [...document.styleSheets].find(
    (s) => s.ownerNode?.dataset?.theme === theme
  );
  if (sheet) sheet.disabled = !enabled;
  return Boolean(sheet);
};

console.log(setThemeEnabled('dark', false));

true

Konstruierte und importierte Stylesheets haben keinen ownerNode

const sheet = new CSSStyleSheet();
sheet.replaceSync('body { color: rebeccapurple; }');
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
console.log(sheet.ownerNode);

// Neues <style>-Element: ownerNode zeigt zurück auf das Element
const style = document.createElement('style');
style.textContent = 'p { margin: 0; }';
document.head.append(style);
console.log(style.sheet.ownerNode === style);

null true

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung an ownerNode wird ignoriert (im Strict Mode gibt es einen TypeError).
null prüfen: Bei @import-Stylesheets und konstruierten Stylesheets ist der Wert null – verwende optionale Verkettung (sheet.ownerNode?.id).
Umgekehrte Richtung: Vom Element zum Stylesheet gelangst du über HTMLStyleElement.sheet bzw. HTMLLinkElement.sheet. Bei <link> ist sheet erst nach dem Laden gesetzt (load-Event abwarten).
Shadow DOM: Stylesheets aus <style>-Elementen in einem Shadow Root erscheinen in shadowRoot.styleSheets, nicht in document.styleSheets; ihr ownerNode liegt im Shadow Tree.
Wird das besitzende Element aus dem DOM entfernt, verschwindet das Stylesheet aus document.styleSheets.
In allen modernen Browsern seit Langem unterstützt.

Siehe auch

StyleSheet CSSStyleSheet.ownerRule Document.styleSheets HTMLStyleElement.sheet HTMLLinkElement.sheet StyleSheet.disabled CSSStyleSheet.rules