Signatur
Beschreibung
Die schreibgeschützte Eigenschaft title der StyleSheet-Schnittstelle liefert den Wert des title-Attributs des Elements, das das Stylesheet eingebunden hat, also des <link>- oder <style>-Elements. Fehlt das Attribut oder ist es leer, ist der Wert null.
Der Titel ist die Grundlage für alternative Stylesheets. Stylesheets mit gleichem Titel bilden eine Gruppe. Der Browser aktiviert die bevorzugte Gruppe (rel="stylesheet" mit title), während Gruppen mit rel="alternate stylesheet" zunächst deaktiviert sind. Stylesheets ohne Titel sind persistent: Sie gelten immer.
In der Praxis braucht man title vor allem, um bestimmte Stylesheets in document.styleSheets wiederzufinden, z. B. um per Skript zwischen Themes zu wechseln, indem man disabled passend setzt.
Rückgabewert
null, wenn das besitzende Element kein bzw. ein leeres title-Attribut hat.Beispiele
Titel aller Stylesheets auflisten
// HTML:
// <link rel="stylesheet" href="base.css">
// <link rel="stylesheet" href="hell.css" title="Hell">
// <link rel="alternate stylesheet" href="dunkel.css" title="Dunkel">
for (const sheet of document.styleSheets) {
console.log(sheet.href?.split('/').pop(), '→', sheet.title);
}Theme-Umschalter über den Titel
const setTheme = (name) => {
for (const sheet of document.styleSheets) {
// Stylesheets ohne Titel sind persistent – nicht anfassen
if (sheet.title === null) continue;
sheet.disabled = sheet.title !== name;
}
localStorage.setItem('theme', name);
};
document.querySelector('#theme-dunkel')
.addEventListener('click', () => setTheme('Dunkel'));
setTheme(localStorage.getItem('theme') ?? 'Hell');Stylesheet eines <style>-Elements per Titel finden
// <style title="print-optimierung">body { font-size: 12pt; }</style>
const findSheetByTitle = (title) =>
[...document.styleSheets].find((s) => s.title === title) ?? null;
const sheet = findSheetByTitle('print-optimierung');
console.log(sheet?.ownerNode.tagName, sheet?.cssRules.length);// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung an
sheet.titlebleibt ohne Wirkung (im Strict Mode wirft sie einenTypeError). Um den Titel zu ändern, setzt man das Attribut am Element:sheet.ownerNode.title = 'Neu'. - Ein leeres
title=""ergibtnull, nicht"". Das Stylesheet gilt dann als persistent. - Per
new CSSStyleSheet()erzeugte (konstruierte) Stylesheets und@import-Stylesheets haben immer den Titelnull. - Ein
titlean einemrel="stylesheet"macht das Stylesheet zum bevorzugten Stylesheet. Weitere Stylesheets mit einem anderen Titel werden dann ignoriert. Wer Basis-Styles immer anwenden will, lässt dort den Titel weg. - Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. Ein Menü zur Auswahl alternativer Stylesheets gibt es aber nur in Firefox (Ansicht → Webseiten-Stil). In anderen Browsern braucht man dafür ein eigenes Skript.