CSSStyleSheet.ownerRule — Eigenschaft · JavaScript-Referenz

Signatur

CSSStyleSheet.ownerRule

Beschreibung

Die schreibgeschützte Eigenschaft ownerRule eines CSSStyleSheet verweist auf die CSSImportRule, die das Stylesheet über eine @import-Regel eingebunden hat. So kann man innerhalb des CSS Object Model (CSSOM) von einem importierten Stylesheet aus zu der Regel zurückgehen, die es geladen hat.

Wurde das Stylesheet nicht per @import geladen, sondern über ein <link>- oder <style>-Element eingebunden oder mit new CSSStyleSheet() erzeugt, ist der Wert null. In diesen Fällen verweist stattdessen ownerNode auf das zugehörige DOM-Element (bei selbst erzeugten Stylesheets ist auch dieser Wert null).

Typische Anwendungsfälle sind Werkzeuge, die die Importhierarchie von Stylesheets analysieren, z. B. Debugging-Hilfen, CSS-Analysewerkzeuge oder Skripte, die herausfinden wollen, aus welcher Datei eine bestimmte Regel stammt. Zusammen mit CSSImportRule.parentStyleSheet kann man vom importierten Stylesheet bis zum Stylesheet der obersten Ebene zurückverfolgen.

Rückgabewert

Typ

CSSImportRule | null

Beschreibung

Die CSSImportRule, die das Stylesheet importiert hat, oder null, wenn das Stylesheet nicht über @import eingebunden wurde.

Beispiele

Prüfen, ob ein Stylesheet importiert wurde

// Alle Stylesheets der obersten Ebene durchgehen
for (const sheet of document.styleSheets) {
  const herkunft = sheet.ownerRule
    ? `@import aus ${sheet.ownerRule.parentStyleSheet.href}`
    : `eingebunden über <${sheet.ownerNode?.nodeName.toLowerCase()}>`;
  console.log(sheet.href ?? '(inline)', '→', herkunft);
}

https://example.com/main.css → eingebunden über <link> (inline) → eingebunden über <style>

Importiertes Stylesheet über CSSImportRule erreichen und zurückverfolgen

// <style>@import url("theme.css") screen;</style>
const style = document.createElement('style');
style.textContent = '@import url("theme.css") screen;';
document.head.append(style);

const importRule = style.sheet.cssRules[0]; // CSSImportRule
// Hinweis: importRule.styleSheet kann null sein, bis theme.css geladen ist
const imported = importRule.styleSheet;
if (imported) {
  console.log(imported.ownerRule === importRule);
  console.log(imported.ownerRule.media.mediaText);
}

true screen

Importkette bis zum Wurzel-Stylesheet verfolgen

const importKette = (sheet) => {
  const kette = [];
  let aktuell = sheet;
  while (aktuell) {
    kette.unshift(aktuell.href ?? '(inline)');
    // ownerRule ist null, sobald die oberste Ebene erreicht ist
    aktuell = aktuell.ownerRule?.parentStyleSheet ?? null;
  }
  return kette.join(' → ');
};

const root = document.styleSheets[0];
const rule = [...root.cssRules].find((r) => r instanceof CSSImportRule);
if (rule?.styleSheet) console.log(importKette(rule.styleSheet));

https://example.com/main.css → https://example.com/theme.css

Konstruierte Stylesheets haben keine ownerRule

const sheet = new CSSStyleSheet();
sheet.replaceSync('body { margin: 0; }');
console.log(sheet.ownerRule);
console.log(sheet.ownerNode);

null null

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung an ownerRule hat keine Wirkung (im Strict Mode wird ein TypeError ausgelöst).
ownerRule vs. ownerNode: Nur eine von beiden ist gesetzt – importierte Stylesheets haben eine ownerRule, aber ownerNode ist null; bei <link>/<style> ist es umgekehrt.
Ladezeitpunkt: Das importierte Stylesheet (CSSImportRule.styleSheet) steht eventuell erst nach dem Laden bereit bzw. ist null, wenn der Import fehlschlägt oder die Media-Bedingung das Laden verhindert (browserabhängig).
Cross-Origin: ownerRule ist zwar auch bei fremden Stylesheets lesbar, der Zugriff auf deren cssRules löst ohne passende CORS-Header aber einen SecurityError aus.
Konstruierte Stylesheets: @import ist in replace()/replaceSync() nicht erlaubt, deshalb ist ownerRule dort immer null.
Die Eigenschaft wird seit langem von allen gängigen Browsern unterstützt.

Siehe auch

CSSStyleDeclaration.parentRule CSSStyleSheet.cssRules CSSStyleSheet.rules StyleSheet.ownerNode StyleSheet.title