ProcessingInstruction.sheet — Eigenschaft · JavaScript-Referenz

Signatur

get ProcessingInstruction.sheet

Beschreibung

Die schreibgeschützte Eigenschaft sheet einer ProcessingInstruction gibt das Stylesheet-Objekt zurück, das zu dieser Verarbeitungsanweisung gehört. Relevant ist das bei der Anweisung <?xml-stylesheet href="…" type="text/css"?>. Damit bindet man in XML-Dokumenten ein Stylesheet ein, etwa in SVG-, XHTML- oder reinen XML-Dateien. Die Eigenschaft stammt aus dem Mixin LinkStyle, das auch HTMLLinkElement und HTMLStyleElement nutzen. Sie funktioniert also genauso wie link.sheet in HTML.

Über das zurückgegebene CSSStyleSheet kommt man an href, media, disabled und cssRules. So kann man ein per Verarbeitungsanweisung eingebundenes Stylesheet zur Laufzeit untersuchen, ausschalten oder ändern.

Den Wert null bekommt man in diesen Fällen:

Die Anweisung ist kein xml-stylesheet, z. B. eine eigene Anweisung wie <?php … ?>.
Der Typ ist kein CSS, z. B. XSLT mit type="text/xsl".
Die Anweisung steht nicht im Prolog des Dokuments, also nicht vor dem Wurzelelement.
Das Dokument hat keinen Browsing-Kontext, z. B. wenn es mit DOMParser erzeugt wurde.

Rückgabewert

Typ

CSSStyleSheet | null

Beschreibung

Das zugehörige CSSStyleSheet-Objekt, oder null, wenn der Verarbeitungsanweisung kein CSS-Stylesheet zugeordnet ist.

Beispiele

Eingebundene Stylesheets eines SVG-/XML-Dokuments auflisten

// Im Kontext einer direkt geöffneten .svg- oder .xhtml-Datei ausführen, z. B.:
// <?xml-stylesheet href="theme.css" type="text/css"?>
// <svg xmlns="http://www.w3.org/2000/svg">…</svg>
const instructions = [...document.childNodes].filter(
  (node) => node.nodeType === Node.PROCESSING_INSTRUCTION_NODE
);

for (const pi of instructions) {
  const { sheet } = pi;
  if (!sheet) {
    console.log(`${pi.target}: kein CSS-Stylesheet`);
    continue;
  }
  console.log(`${pi.target}: ${sheet.href}, ${sheet.cssRules.length} Regeln`);
}

xml-stylesheet: https://example.com/theme.css, 12 Regeln

Stylesheet per Verarbeitungsanweisung zur Laufzeit ausschalten

// Schaltet alle per <?xml-stylesheet?> eingebundenen Stylesheets an/aus
const toggleXmlStylesheets = (enabled) => {
  for (const node of document.childNodes) {
    if (node instanceof ProcessingInstruction && node.sheet) {
      node.sheet.disabled = !enabled;
    }
  }
};

toggleXmlStylesheets(false); // Dokument ohne Stil anzeigen
setTimeout(() => toggleXmlStylesheets(true), 2000); // nach 2 s wieder an

Ohne Browsing-Kontext bleibt sheet null

const xml = `<?xml-stylesheet href="style.css" type="text/css"?>
<root><item>Test</item></root>`;

const doc = new DOMParser().parseFromString(xml, 'application/xml');
const pi = doc.firstChild;

console.log(pi.nodeName); // Ziel der Anweisung
console.log(pi.data);     // Inhalt der Anweisung
console.log(pi.sheet);    // Dokument ohne Browsing-Kontext lädt kein CSS

xml-stylesheet href="style.css" type="text/css" null

// Wichtig · Fallstricke

Nur in XML-Dokumenten: In HTML-Dokumenten, die mit text/html ausgeliefert werden, liest der Parser <?…?> als Kommentar. Dort gibt es also keine ProcessingInstruction mit sheet. In HTML nimmt man stattdessen <link rel="stylesheet"> und HTMLLinkElement.sheet.
Nur lesbar: Eine Zuweisung an sheet wirkt nicht und wirft im Strict Mode einen TypeError. Um das Stylesheet zu wechseln, ändert man pi.data (z. B. einen neuen href) oder ersetzt die Verarbeitungsanweisung.
Ladezeitpunkt: Direkt nach dem Einfügen mit document.createProcessingInstruction() ist das Stylesheet eventuell noch nicht geladen. Je nach Browser ist sheet dann noch null oder cssRules ist leer.
Same-Origin-Regel: Kommt das Stylesheet von einer anderen Herkunft und liefert keine CORS-Header, wirft der Zugriff auf sheet.cssRules einen SecurityError.
XSLT: Bei type="text/xsl" ist sheet null. XSLT-Transformationen sind nicht als CSSStyleSheet zugänglich.

Siehe auch

ProcessingInstruction ProcessingInstruction.target CSSStyleSheet HTMLLinkElement.sheet HTMLStyleElement.sheet Document.createProcessingInstruction() Document.styleSheets