Signatur
Beschreibung
Die Eigenschaft title des Interfaces SVGStyleElement spiegelt das Inhaltsattribut title des SVG-Elements <style> wider. Beim Lesen erhältst du den aktuellen Attributwert als String. Fehlt das Attribut, ist das Ergebnis ein leerer String. Beim Schreiben wird das Attribut sofort gesetzt oder überschrieben.
Der Titel hat eine funktionale Bedeutung: Er wird an das erzeugte CSSStyleSheet weitergegeben (sheet.title) und ordnet das Stylesheet einem benannten Stylesheet-Satz zu. Stylesheets ohne Titel sind „persistent“ und gelten immer. Stylesheets mit Titel gehören zu einem bevorzugten oder alternativen Satz. Nutzen kannst du das zum Beispiel für Designvarianten, die sich über das title-Attribut erkennen und ein- oder ausschalten lassen.
Wichtig: Das title-Attribut am <style>-Element hat nichts mit dem SVG-Element <title> zu tun. Letzteres liefert zugängliche Namen und Tooltips für Grafiken. Die Eigenschaft ist kein Tooltip-Text, sondern dient nur der Verwaltung von Stylesheets.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Nur beim Schreiben: der neue Titel. Wird als title-Attribut übernommen. Andere Werte werden in einen String umgewandelt. |
Rückgabewert
title-Attributs oder ein leerer String, wenn das Attribut fehlt.Beispiele
Titel eines SVG-Stylesheets auslesen
// Ein SVG mit titeltragendem <style> erzeugen
document.body.insertAdjacentHTML('beforeend', `
<svg id="grafik" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<style title="Standard">circle { fill: steelblue; }</style>
<circle cx="50" cy="50" r="40" />
</svg>`);
const style = document.querySelector('#grafik style');
console.log(style instanceof SVGStyleElement);
console.log(style.title);
console.log(style.sheet?.title);Titel per Skript setzen und entfernen
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
style.textContent = 'rect { fill: tomato; }';
svg.append(style);
document.body.append(svg);
console.log(JSON.stringify(style.title)); // noch kein Attribut
style.title = 'Dunkles Design';
console.log(style.getAttribute('title'));
style.removeAttribute('title');
console.log(JSON.stringify(style.title));Designvarianten über den Titel umschalten
document.body.insertAdjacentHTML('beforeend', `
<svg id="karte" xmlns="http://www.w3.org/2000/svg" width="120" height="60">
<style title="hell">rect { fill: #eee; }</style>
<style title="dunkel">rect { fill: #222; }</style>
<rect width="120" height="60" />
</svg>`);
// Nur das Stylesheet mit dem passenden Titel aktivieren
const setzeDesign = (name) => {
for (const style of document.querySelectorAll('#karte style')) {
if (style.sheet) style.sheet.disabled = style.title !== name;
}
};
setzeDesign('dunkel');
console.log([...document.querySelectorAll('#karte style')]
.map((s) => `${s.title}: ${s.sheet.disabled ? 'aus' : 'an'}`));// Wichtig · Fallstricke
- Nebenwirkung auf die Darstellung: Ein Titel macht ein Stylesheet zu einem benannten Stylesheet-Satz. Tragen mehrere
<style>-Elemente im Dokument unterschiedliche Titel, wendet der Browser in der Regel nur den bevorzugten Satz an, also meist den zuerst gefundenen Titel. Die übrigen werden deaktiviert. Wer den Titel nur als Beschriftung nutzen will, kann dadurch versehentlich Stile verlieren. Nimm dafür lieber eindata-*-Attribut. - Nicht mit
<title>verwechseln: Tooltips und zugängliche Namen für SVG-Grafiken kommen vom Kindelement<title>, nicht von diesem Attribut. - Namensraum beachten:
document.createElement('style')erzeugt einHTMLStyleElement. Für einSVGStyleElementbrauchst ducreateElementNS('http://www.w3.org/2000/svg', 'style'). Beide Interfaces haben einetitle-Eigenschaft mit gleichem Verhalten. - Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. In SVG 1.1 war sie Teil der Spezifikation, in SVG 2 wurde sie an
HTMLStyleElementangeglichen. Sehr alte Engines ohne Unterstützung liefernundefined. Dort hilftgetAttribute('title')als Ausweichlösung.