Document.enableStyleSheetsForSet() — Methode · JavaScript-Referenz

Signatur

Document.prototype.enableStyleSheetsForSet(name)

Beschreibung

Mit enableStyleSheetsForSet() ließ sich per Skript zwischen alternativen Stylesheet-Sets umschalten. Ein Set besteht aus allen <link rel="stylesheet">-, <link rel="alternate stylesheet">- und <style>-Elementen, die dasselbe title-Attribut haben. Nach dem Aufruf sind nur die Stylesheets des Sets name aktiv. Alle anderen Stylesheets mit Titel werden deaktiviert. Stylesheets ohne Titel (sogenannte persistente Stylesheets) werden nie verändert.

Typische Anwendungen waren Theme-Umschalter wie „Hell/Dunkel“, „Hoher Kontrast“ oder „Große Schrift“, bei denen der Autor mehrere alternative Stylesheets im HTML anbietet. Anders als beim Setzen von document.selectedStyleSheetSet ändert die Methode nicht den Wert von document.lastStyleSheetSet. Der Browser merkt sich die Auswahl also nicht als Benutzerwahl.

Die Methode gehörte zu einem Entwurf des CSSOM, der nie standardisiert wurde. Nur Firefox hat sie umgesetzt und in Version 64 wieder entfernt. In neuem Code verwendet man stattdessen die Eigenschaft disabled von CSSStyleSheet bzw. HTMLLinkElement über document.styleSheets. Das funktioniert in allen Browsern.

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string		Titel des Stylesheet-Sets, das aktiviert werden soll. Groß- und Kleinschreibung werden unterschieden. Mit einem leeren String `""` werden alle Stylesheets mit Titel deaktiviert. `null` bewirkt nichts.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Historische Nutzung mit Funktionsprüfung

// HTML:
// <link rel="stylesheet" href="basis.css">                         (ohne Titel, immer aktiv)
// <link rel="stylesheet" href="hell.css" title="Hell">
// <link rel="alternate stylesheet" href="dunkel.css" title="Dunkel">

if (typeof document.enableStyleSheetsForSet === 'function') {
  document.enableStyleSheetsForSet('Dunkel');
  console.log('Set per alter API gewechselt');
} else {
  console.log('enableStyleSheetsForSet wird nicht unterstützt');
}

enableStyleSheetsForSet wird nicht unterstützt

Moderner, browserübergreifender Ersatz

const enableStyleSheetsForSet = (name) => {
  for (const sheet of document.styleSheets) {
    const title = sheet.ownerNode?.title;
    if (!title) continue; // Stylesheets ohne Titel bleiben unverändert
    sheet.disabled = title !== name;
  }
};

enableStyleSheetsForSet('Dunkel');

const aktiv = [...document.styleSheets]
  .filter((s) => s.ownerNode?.title && !s.disabled)
  .map((s) => s.ownerNode.title);
console.log(aktiv);

["Dunkel"]

Theme-Umschalter mit gespeicherter Auswahl

const setTheme = (name) => {
  for (const link of document.querySelectorAll('link[rel~="stylesheet"][title]')) {
    // disabled erst nach false → true setzen, damit alternative Stylesheets zuverlässig laden
    link.disabled = true;
    link.disabled = link.title !== name;
  }
  localStorage.setItem('theme', name);
};

document.querySelector('#theme-select')?.addEventListener('change', (e) => {
  setTheme(e.target.value);
});

setTheme(localStorage.getItem('theme') ?? 'Hell');

// Wichtig · Fallstricke

Nicht mehr verwenden: Die Methode war nie standardisiert und wurde in Firefox 64 zusammen mit selectedStyleSheetSet, lastStyleSheetSet, preferredStyleSheetSet und styleSheetSets entfernt. Chrome, Safari und Edge haben sie nie unterstützt. Ein Aufruf ohne Prüfung löst dort einen TypeError aus.
Der Titelvergleich unterscheidet Groß- und Kleinschreibung: "dunkel" passt nicht auf title="Dunkel".
null bewirkt nichts. Um alle Stylesheets mit Titel abzuschalten, muss man "" übergeben.
Stylesheets ohne title-Attribut sind nie betroffen. Wer alles abschalten will, muss das über disabled selbst erledigen.
Die Auswahl wird nicht gespeichert und übersteht kein Neuladen der Seite. Für dauerhafte Themes die Auswahl z. B. in localStorage ablegen oder CSS-Custom-Properties mit prefers-color-scheme verwenden.

Siehe auch

Document.styleSheets Document.selectedStyleSheetSet Document.lastStyleSheetSet Document.preferredStyleSheetSet Document.styleSheetSets StyleSheet.disabled CSSStyleSheet