Data-Attribute verwenden und wo sie nützlich sind!

In diesem Beitrag will ich dir zeigen, wofür data-Attribute in HTML nützlich sind. Diese bieten die Möglichkeit bei bestimmten Elementen weitere Informationen zu speichern und kamen mit HTML5 hinzu.

Der Browser-Support ist in allen heute verwendeten Browsern vorhanden. Über die Unterstützung musst du dir also keine Gedanken machen!

Ein Beispiel für Data-Attribute:

<div class="popup" data-popup-id="Felix"></div>

<a data-popup="Felix">Öffne das Pop-Up</a>

So könnte zum Beispiel eine Verlinkung zwischen zwei Elementen mit Data-Attributen aussehen, natürlich muss man dafür noch eine entsprechende Logik entwickeln.

Eigene Attribute kannst du nach dem Schema data-* erstellen. Wie viele Attribute und was für einen Inhalt diese haben ist dir komplett frei. Es müssen aber Strings sein und du darfst kein HTML in den Attributen verwenden, da das zu Parsing-Fehlern führen kann.

Du kannst verschiedene Varianten benutzen, alle folgenden Beispiele sind valide.

<a data-socialmedia href="https://facebook.com">Facebook</a>

<a data-socialmedia="facebook">Facebook</a>

<a data-social-media="facebook">Facebook</a>

<a data-foo-bar-foo>Facebook</a>

<a data-foo_bar_foo>Facebook</a>

Du kannst mehrere - (Dash/Minus) verwenden und den Wert eines Attributs weglassen. Selbst _ (Unterstriche) sind als Attributname zulässig.

In der Variation und im Inhalt der Attribute bist du frei, genau aus diesem Grund nutze ich die Data-Attribute auch sehr gerne.

Attribute in Javascript verwenden

Mit JavaScript kannst du leicht auf die Attribute zugreifen. Dafür gibt es einige Methoden für das "Get" (Holen) und "Set" (Definieren) von Attributen.

Zugriff per getAttribute und setAttribute

Die ältere Möglichkeit auf Data-Attribute zuzugreifen sind die setAttribute und getAttribute Methoden.

So kannst du zum Beispiel dem Body ein Attribut data-item mit dem Wert wert geben, oder du kannst mit getAttribute diesen Wert abrufen und z. B. in einer Variable speichern.

document.body.setAttribute("data-item", "wert")

let item = document.body.getAttribute("data-item")

Mit dieser Variante kannst du schon vollständig mit den Data-Attributen arbeiten, allerdings gibt es noch eine Modernere.

Zugriff per DataSet API

Zuvor sei zum Support der DataSet API gesagt, dass der IE10 nicht unterstützt wird. Anbei eine Tabelle mit den wichtigsten Browsern und ab welcher Version diese die Funktion unterstützen.

Nun wollen wir dieselbe Funktionalität noch einmal mit dataset umsetzen, ohne die getAttribute und setAttribute Methoden zu verwenden.

document.body.dataset["item"] = "Wert"

let item = document.body.dataset["item"]

Der Vorteil der DataSet API ist, dass diese ein Objekt mit allen Data-Attributen bereitstellt. So kann man auch die Existenz eines Attributs überprüfen.

if ("item" in document.body.dataset) {
    // Deine Anweisung, wenn das Attribut gesetzt ist!
}

Aus diesem Grund finde ich es sinnvoll immer mit dataset zu arbeiten, wenn man auf die Werte zugreifen oder neue setzen will.

Attribute in CSS verwenden

Wir können diese Attribute auch über die Attribut-Selektoren für das CSS Styling nutzen. Des Weiteren können wir bei :before und :after Elementen den content über die Data-Attribute setzen. So können wir uns gelegentlich einiges an CSS sparen. Das zeige ich im nachfolgenden Beispiel.

Ein Selektor für ein Attribut könnte so aussehen:

a[data-foo-bar-foo] { }
a[data-foo-bar-foo="foo"] { }
a[data-foo-bar-foo="FOO" i] { }

Der erste Selektor selektiert alle a Elemente mit dem Attribut data-foo-bar-foo, unabhängig vom Wert des Attributes.

Der zweite Selektor selektiert alle a mit dem Attribute data-foo-bar-foo und dem Wert foo.

Der dritte Selektor selektiert alle a mit dem Attribute data-foo-bar-foo und dem Wert foo aber das i sagt aus, dass die Schreibweise egal ist, also werden foo, FOO und fOo selektiert.

Verwendung von Data-Attributen in before und after Elementen

Manchmal gibt es Fälle, in denen man ganz viele verschiedene Werte in before/after Elementen dynamisch setzen lassen möchte. Auch dafür gibt es eine Möglichkeit, und zwar die attr CSS Funktion.

.btn[data-icon]:before {
   content: attr(data-icon);
}

Diese ist zum Beispiel bei der Icon-Bibliothek von Google "Material Icons" interessant, da dort der Name des Icons in das Icon umgewandelt wird. So lässt sich zum Beispiel folgender Button erstellen:

<a class="btn" data-icon="send">Absenden</a>

So muss man nicht für jedes Icon was man verwenden möchte eine eigene Klasse definieren, sondern kann den dynamischen Wert verwenden. Diese Variante nutze ich zum Beispiel für die Buttons auf dieser Webseite.

Abschließende Worte

Die Data-Attribute geben dir beim Arbeiten mit JavaScript und CSS viel Flexibilität, die vor HTML5 noch nicht vorhanden war. So kannst du in einem validen Format zusätzliche Informationen in deinem Element speichern.

Ich empfehle dir für die Verwendung mit JavaScript die Nutzung der DataSet API, da diese eine deutlich kürzere Schreibweise als die ältere Methode über getAttribute und setAttribute hat. Und man kann einfach eine Liste mit allen Werten erhalten.