Document.selectedStyleSheetSet — Eigenschaft · JavaScript-Referenz

Signatur

Document.selectedStyleSheetSet

Beschreibung

document.selectedStyleSheetSet gehört zu einer inzwischen aufgegebenen Gruppe von Stilblatt-Set-APIs aus einem frühen CSSOM-Entwurf. Ein Stilblatt-Set besteht aus allen Stylesheets (<link rel="stylesheet">, <link rel="alternate stylesheet"> oder <style>) mit demselben title-Attribut. Mit solchen Sets lassen sich z. B. Themes wie „Hell“, „Dunkel“ oder „Hoher Kontrast“ anbieten.

Beim Lesen gibt die Eigenschaft den Titel des Sets zurück, das gerade aktiv ist. Sind keine betitelten Stylesheets aktiv, war das Ergebnis ein leerer String; waren Stylesheets mit unterschiedlichen Titeln gleichzeitig aktiv (etwa weil Skripte disabled einzeln verändert haben), lieferte der Getter null.

Beim Schreiben werden alle Stylesheets mit passendem title aktiviert und alle anderen betitelten Stylesheets deaktiviert. Stylesheets ohne title (persistente Stylesheets) bleiben immer unverändert aktiv. Anders als enableStyleSheetsForSet() merkte sich der Browser die Auswahl in lastStyleSheetSet, sodass spätere Änderungen von preferredStyleSheetSet sie nicht mehr überschrieben.

Für neuen Code solltest du die Eigenschaft nicht verwenden. Themes baut man heute portabel, indem man die disabled-Eigenschaft von HTMLLinkElement bzw. CSSStyleSheet umschaltet, CSS Custom Properties nutzt oder mit prefers-color-scheme arbeitet.

Parameter

Name	Typ	Default	Beschreibung
$value (Setter)	string		Beim Zuweisen: Titel des Stilblatt-Sets, das aktiviert werden soll. Alle betitelten Stylesheets mit anderem `title` werden deaktiviert. Ein leerer String deaktiviert alle betitelten Stylesheets.

Rückgabewert

Typ

string | null

Beschreibung

Titel des aktiven Stilblatt-Sets, "" wenn kein betiteltes Stylesheet aktiv ist, null bei uneinheitlichem Zustand. In aktuellen Browsern existiert die Eigenschaft nicht, der Zugriff liefert daher undefined.

Beispiele

Feature-Erkennung und Auslesen des aktiven Sets

// Prüfen, ob die veraltete API überhaupt vorhanden ist
if ('selectedStyleSheetSet' in document) {
  console.log('Aktives Set:', document.selectedStyleSheetSet);
} else {
  console.log('selectedStyleSheetSet wird nicht unterstützt');
}

selectedStyleSheetSet wird nicht unterstützt

Theme umschalten (historischer Firefox-Weg)

// HTML:
// <link rel="stylesheet" href="basis.css">
// <link rel="stylesheet" href="hell.css" title="Hell">
// <link rel="alternate stylesheet" href="dunkel.css" title="Dunkel">

const setTheme = (name) => {
  if ('selectedStyleSheetSet' in document) {
    document.selectedStyleSheetSet = name; // nur alte Firefox-Versionen
    console.log('Jetzt aktiv:', document.selectedStyleSheetSet);
  }
};

setTheme('Dunkel');

Jetzt aktiv: Dunkel (nur Firefox < 64)

Moderner, portabler Ersatz über link.disabled

// Aktiviert alle Stylesheets mit dem gewünschten Titel,
// deaktiviert andere betitelte Stylesheets – persistente bleiben aktiv.
const selectStyleSheetSet = (name) => {
  const links = document.querySelectorAll(
    'link[rel~="stylesheet"][title], style[title]'
  );
  links.forEach((el) => {
    el.disabled = el.title !== name;
  });
  localStorage.setItem('theme', name);
};

const getSelectedStyleSheetSet = () => {
  const titles = new Set(
    [...document.styleSheets]
      .filter((s) => s.title && !s.disabled)
      .map((s) => s.title)
  );
  if (titles.size === 0) return '';
  return titles.size === 1 ? [...titles][0] : null;
};

selectStyleSheetSet(localStorage.getItem('theme') ?? 'Hell');
console.log(getSelectedStyleSheetSet());

Hell

// Wichtig · Fallstricke

Nicht standardisiert und entfernt: Die Eigenschaft gab es nur in Gecko (Firefox 3.5 bis 63). Chrome, Safari und Edge haben sie nie unterstützt. Ab Firefox 64 wurde sie zusammen mit lastStyleSheetSet, preferredStyleSheetSet, styleSheetSets und enableStyleSheetsForSet() entfernt.
In aktuellen Browsern liefert der Zugriff undefined. Eine Zuweisung legt nur eine gewöhnliche Eigenschaft am Objekt an und bewirkt nichts, und das ohne Fehlermeldung.
Stylesheets ohne title sind persistent und werden nie durch ein Set deaktiviert. Das gilt auch für den portablen Ersatz.
Das Umschalten einzelner Stylesheets per disabled konnte den Getter auf null bringen, wenn danach verschiedene Titel gleichzeitig aktiv waren.
Die Browser-Menüs für alternative Stylesheets (z. B. „Ansicht → Webseiten-Stil“ in Firefox) funktionieren weiterhin unabhängig von dieser API.

Siehe auch

Document.styleSheets Document.preferredStyleSheetSet Document.lastStyleSheetSet Document.styleSheetSets Document.enableStyleSheetsForSet() StyleSheet.disabled HTMLLinkElement