SVGStyleElement.disabled — Eigenschaft · JavaScript-Referenz

Signatur

SVGStyleElement.disabled

Beschreibung

Die Eigenschaft disabled des SVGStyleElement-Interfaces bestimmt, ob die CSS-Regeln in einem <style>-Element innerhalb eines SVG-Dokuments (oder eines Inline-SVGs in HTML) angewendet werden. Wenn Sie den Wert auf true setzen, wird das zugehörige Stylesheet abgeschaltet, ohne das Element aus dem DOM zu entfernen. Mit false schalten Sie es wieder ein.

Technisch leitet die Eigenschaft Lese- und Schreibzugriffe an das verknüpfte CSSStyleSheet-Objekt weiter (erreichbar über svgStyle.sheet). svgStyle.disabled entspricht damit svgStyle.sheet.disabled. Existiert kein Stylesheet, etwa weil das Element noch nicht in ein Dokument eingehängt ist, liefert die Eigenschaft false und Schreibzugriffe haben keine Wirkung.

Typische Anwendungsfälle:

Themes in Inline-SVGs umschalten (z. B. hell/dunkel oder Hochkontrast)
Debug- oder Hervorhebungsstile vorübergehend aktivieren
Alternative Darstellungen einer Grafik vergleichen, ohne CSS-Text neu zu erzeugen

Anders als bei vielen anderen DOM-Eigenschaften gibt es kein entsprechendes Inhaltsattribut. disabled wird also nicht im Markup gespiegelt und bleibt beim Serialisieren (z. B. über outerHTML) nicht erhalten.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Beim Setzen: `true` deaktiviert das Stylesheet, `false` aktiviert es. Andere Werte werden in einen booleschen Wert umgewandelt.

Beispiele

Status eines SVG-Stylesheets abfragen

// HTML: <svg><style id="svgTheme">circle { fill: tomato; }</style><circle cx="50" cy="50" r="40"/></svg>
const styleEl = document.querySelector('#svgTheme');

console.log(styleEl instanceof SVGStyleElement); // true
console.log(styleEl.disabled);                  // false
console.log(styleEl.sheet.disabled);            // false (gleicher Wert)

true false false

Dunkles Theme eines Inline-SVGs per Button umschalten

// HTML:
// <button id="toggle">Dunkles Theme</button>
// <svg>
//   <style id="darkTheme">rect { fill: #222; } text { fill: #eee; }</style>
//   <rect width="200" height="80"/><text x="20" y="45">Hallo</text>
// </svg>
const darkTheme = document.querySelector('#darkTheme');
const button = document.querySelector('#toggle');

// Standardmäßig deaktiviert starten
darkTheme.disabled = true;

button.addEventListener('click', () => {
  darkTheme.disabled = !darkTheme.disabled;
  button.textContent = darkTheme.disabled ? 'Dunkles Theme' : 'Helles Theme';
  console.log(`Dunkles Theme aktiv: ${!darkTheme.disabled}`);
});

Dunkles Theme aktiv: true (nach dem ersten Klick)

Fallstrick: Element ohne Dokument-Anbindung

const SVG_NS = 'http://www.w3.org/2000/svg';
const style = document.createElementNS(SVG_NS, 'style');
style.textContent = 'circle { stroke: blue; }';

// Noch nicht im DOM -> kein Stylesheet
console.log(style.sheet);     // null
style.disabled = true;        // hat keine Wirkung
console.log(style.disabled);  // false

// Erst einhängen, dann deaktivieren
const svg = document.querySelector('svg');
svg.prepend(style);
style.disabled = true;
console.log(style.disabled);  // true

null false true

// Wichtig · Fallstricke

Nur mit vorhandenem Stylesheet wirksam: Solange sheet den Wert null hat (Element nicht im Dokument, falscher type), liefert disabled immer false und Zuweisungen werden stillschweigend ignoriert. Setzen Sie den Wert erst nach dem Einhängen ins DOM.
Kein HTML-/SVG-Attribut: Ein disabled-Attribut im Markup, etwa <style disabled>, hat bei SVG-<style> keine Wirkung. Der Zustand geht außerdem verloren, wenn das Element neu erstellt oder serialisiert wird.
Neu einhängen setzt zurück: Wird das Element entfernt und wieder eingefügt, oder ändert sich sein Textinhalt, entsteht ein neues CSSStyleSheet. Dieses ist wieder aktiv.
Alternative: Für Stile, die von Bedingungen abhängen (z. B. prefers-color-scheme), sind Media-Queries über das media-Attribut oft die bessere Lösung als ein Umschalten per Skript.
Kompatibilität: Wird von allen aktuellen Browsern (Chrome, Edge, Firefox, Safari) unterstützt. Die Eigenschaft ist in SVG 2 definiert, Details können in sehr alten Browserversionen abweichen.

Siehe auch

SVGStyleElement SVGStyleElement.sheet SVGStyleElement.media StyleSheet.disabled HTMLStyleElement.disabled CSSStyleSheet HTMLTextAreaElement.disabled