HTMLStyleElement.sheet — Eigenschaft · JavaScript-Referenz

Signatur

HTMLStyleElement.sheet

Beschreibung

Die Eigenschaft sheet eines <style>-Elements gibt das zugehörige CSSStyleSheet-Objekt zurück. Darüber kann man die enthaltenen CSS-Regeln per CSSOM auslesen, einfügen, ändern oder löschen, ohne den Textinhalt des Elements neu zu setzen.

Typische Einsatzfälle sind dynamisches Theming, das Einfügen von Regeln zur Laufzeit (z. B. in CSS-in-JS-Bibliotheken) über insertRule(), das schnelle Deaktivieren eines kompletten Stylesheets über sheet.disabled sowie Analyse-Werkzeuge, die cssRules durchlaufen.

Der Wert ist null, solange das Element nicht im Dokument eingehängt ist, oder wenn das type-Attribut einen anderen Wert als text/css (bzw. leer) hat. Wird das Element aus dem DOM entfernt, wird das Stylesheet ebenfalls verworfen; beim erneuten Einfügen entsteht ein neues CSSStyleSheet-Objekt.

Rückgabewert

Typ

CSSStyleSheet | null

Beschreibung

Das mit dem Element verknüpfte CSSStyleSheet oder null, wenn das Element nicht im Dokument ist bzw. keinen CSS-Inhalt verarbeitet.

Beispiele

Regeln eines Style-Elements auslesen

const style = document.createElement('style');
style.textContent = 'body { margin: 0; } h1 { color: teal; }';

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

document.head.append(style);
const rules = [...style.sheet.cssRules].map(r => r.cssText);
console.log(rules);

null ["body { margin: 0px; }", "h1 { color: teal; }"]

Regeln zur Laufzeit einfügen und löschen

const style = document.createElement('style');
document.head.append(style);
const { sheet } = style;

// Regel am Ende einfügen, Index merken
const index = sheet.insertRule('.highlight { background: yellow; }', sheet.cssRules.length);
console.log(sheet.cssRules.length);

// Regel später wieder entfernen
sheet.deleteRule(index);
console.log(sheet.cssRules.length);

1 0

Dark-Mode-Stylesheet ein- und ausschalten

const darkStyle = document.createElement('style');
darkStyle.textContent = ':root { --bg: #111; --fg: #eee; } body { background: var(--bg); color: var(--fg); }';
document.head.append(darkStyle);

const toggleDark = (on) => {
  darkStyle.sheet.disabled = !on;
};

toggleDark(false);
console.log(darkStyle.sheet.disabled);

true

// Wichtig · Fallstricke

Nur lesbar: sheet selbst kann nicht zugewiesen werden; das zurückgegebene Objekt ist jedoch veränderbar.
null vor dem Einhängen: Immer erst nach append() auf sheet zugreifen, sonst gibt es einen TypeError beim Zugriff auf cssRules.
Neues Objekt nach Verschieben: Entfernen und erneutes Einfügen erzeugt ein frisches Stylesheet aus textContent – per insertRule() hinzugefügte Regeln gehen dabei verloren.
textContent vs. CSSOM: Änderungen über insertRule() erscheinen nicht im textContent und damit nicht in den Elements-Ansichten der DevTools als Text. Umgekehrt ersetzt das Setzen von textContent alle CSSOM-Änderungen.
insertRule() wirft einen SyntaxError bei ungültigem CSS – bei Nutzereingaben mit try/catch absichern.
Für wiederverwendbare Stylesheets (z. B. in Shadow DOM) sind Constructable Stylesheets (new CSSStyleSheet() + adoptedStyleSheets) oft die bessere Wahl.
Kompatibilität: in allen modernen Browsern unterstützt (früher als LinkStyle.sheet spezifiziert).

Siehe auch

HTMLImageElement.srcset HTMLStyleElement.type HTMLStyleElement.media HTMLStyleElement.disabled HTMLStyleElement.blocking