SVGStyleElement.sheet — Eigenschaft · JavaScript-Referenz

Signatur

SVGStyleElement.sheet

Beschreibung

Die Eigenschaft sheet eines SVGStyleElement (also eines <style>-Elements innerhalb eines SVG-Dokuments oder Inline-SVGs) gibt das CSSStyleSheet-Objekt zurück, das der Browser aus dem Inhalt des Elements erzeugt hat. Die Eigenschaft stammt ursprünglich aus dem Mixin LinkStyle und verhält sich wie HTMLStyleElement.sheet.

Mit dem zurückgegebenen Stylesheet kannst du die CSS-Regeln zur Laufzeit auslesen (cssRules), ergänzen (insertRule()), entfernen (deleteRule()) oder das ganze Stylesheet über disabled ein- und ausschalten. Das ist nützlich für dynamische Themes, Hervorhebungen oder Animationen in SVG-Grafiken, ohne dass du für jedes Element einzeln Inline-Styles setzen musst.

Der Wert ist null, solange das Element nicht im Dokument eingehängt ist, oder wenn sein type-Attribut einen anderen Wert als text/css (bzw. leer) hat. Die Eigenschaft ist schreibgeschützt – du kannst ihr kein anderes Stylesheet zuweisen.

Rückgabewert

Typ

CSSStyleSheet | null

Beschreibung

Das zum Element gehörende CSSStyleSheet oder null, wenn kein Stylesheet zugeordnet ist (z. B. Element nicht im DOM oder nicht unterstützter type).

Beispiele

Regeln eines SVG-Stylesheets auslesen

// HTML: <svg id="grafik"><style>circle { fill: tomato; } rect { stroke: navy; }</style>...</svg>
const styleEl = document.querySelector('#grafik style');
const sheet = styleEl.sheet;

if (sheet) {
  for (const rule of sheet.cssRules) {
    console.log(rule.cssText);
  }
}

circle { fill: tomato; } rect { stroke: navy; }

Regel zur Laufzeit hinzufügen (Hover-Hervorhebung)

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const style = document.createElementNS(svgNS, 'style');
style.textContent = 'circle { fill: gray; }';
svg.append(style);

console.log(style.sheet); // noch nicht im DOM

document.body.append(svg);
style.sheet.insertRule('circle:hover { fill: gold; }', style.sheet.cssRules.length);
console.log(style.sheet.cssRules.length);

null 2

Theme per disabled umschalten

const darkTheme = document.querySelector('svg style#dark');
const button = document.querySelector('#theme-toggle');

button.addEventListener('click', () => {
  const sheet = darkTheme.sheet;
  if (!sheet) return;
  sheet.disabled = !sheet.disabled;
  console.log(`Dunkles Theme aktiv: ${!sheet.disabled}`);
});

Dunkles Theme aktiv: false

// Wichtig · Fallstricke

Immer auf null prüfen: Vor dem Einhängen in das Dokument oder bei einem type ungleich text/css liefert sheet null. Ein direkter Zugriff wie style.sheet.insertRule() wirft dann einen TypeError.
Neues Objekt bei Inhaltsänderung: Wenn du textContent des Elements änderst, erzeugt der Browser ein neues CSSStyleSheet. Zuvor gespeicherte Referenzen und per insertRule() eingefügte Regeln gehen dabei verloren.
Nur SVG-Namensraum: Ein <style>, das per document.createElement('style') erzeugt wird, ist ein HTMLStyleElement. Für ein SVGStyleElement brauchst du createElementNS('http://www.w3.org/2000/svg', 'style'). Beide besitzen aber eine gleichwertige sheet-Eigenschaft.
Geltungsbereich: Regeln in einem Inline-SVG-<style> gelten für das gesamte HTML-Dokument, nicht nur für das SVG. Bei einem SVG, das über <img> oder <object> eingebunden ist, bleiben sie dagegen auf dieses SVG beschränkt.
Sicherheit: Baue Regeln für insertRule() nicht ungeprüft aus Benutzereingaben zusammen. Sonst kann CSS eingeschleust werden, etwa um Daten über Attributselektoren abzugreifen.
Die Eigenschaft wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGStyleElement CSSStyleSheet HTMLStyleElement.sheet CSSStyleSheet.insertRule() CSSStyleSheet.cssRules Document.styleSheets HTMLSourceElement.sizes