Data Attributes

Was sind Data-Attribute?

Data-Attribute sind eine flexible Möglichkeit, um beliebige Daten an HTML-Elemente zu hängen. Sie beginnen immer mit data- und dürfen frei benannt werden. So kannst du z. B. Zusatzinfos speichern, die dein JavaScript später ausliest oder verarbeitet.

HTML Kopieren

<div data-user-id="42" data-theme="dark">
    Benutzerprofil
</div>

Wann verwendet man sie?

Immer dann, wenn du zusätzliche Informationen brauchst, die nicht direkt angezeigt werden sollen, aber für Skripte oder Styles wichtig sind – z. B. für dynamische Inhalte, Filter, Tooltips oder interaktive Effekte.

• Du möchtest einem Button eine Produkt-ID mitgeben → data-product-id
• Du willst festhalten, ob ein Element aktiv ist → data-state="active"
• Du möchtest über CSS etwas abhängig von Datenwerten gestalten

Data-Attribute mit JavaScript auslesen

JavaScript bietet dir über dataset einfachen Zugriff auf Data-Attribute:

HTML Kopieren

<button id="buyButton" data-product-id="A123">
    Kaufen
</button>

JavaScript Kopieren

const button = document.querySelector('#buyButton');
const productId = button.dataset.productId;
console.log(productId); // Ausgabe: "A123"

Dabei wird aus data-product-id automatisch dataset.productId (CamelCase).

Data-Attribute in CSS

Auch CSS kann Data-Attribute nutzen – z. B. um gezielt Elemente abhängig von Datenwerten zu stylen.

HTML Kopieren

<div data-state="active">Aktiv</div>
<div data-state="inactive">Inaktiv</div>

CSS Kopieren

[data-state="active"] {
    background-color: lightgreen;
}
[data-state="inactive"] {
    background-color: lightgray;
}

Beispiel: Tooltip mit Data-Attribut

Ein typisches Anwendungsbeispiel: du möchtest Tooltips anzeigen, ohne zusätzliches Markup:

HTML Kopieren

<button data-tooltip="Hier klicken, um zu speichern">💾 Speichern</button>

CSS Kopieren

button[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    background: #333;
    color: white;
    padding: 0.4em 0.6em;
    border-radius: 4px;
    font-size: 0.8em;
}

Vorteile & Hinweise

• + Flexibel: Du kannst beliebige Werte speichern.
• + Einfach: Kein zusätzlicher JavaScript-Code nötig, um Informationen im HTML zu hinterlegen.
• – Nicht für sensible Daten! Alles im HTML ist öffentlich einsehbar.
• – Kein Ersatz für Datenbanken: Eher für kleine Zusatzinfos oder Statuswerte.

Also.

Data-Attribute sind eine elegante Lösung, um HTML-Elemente mit Zusatzinformationen auszustatten. Sie verbinden Struktur (HTML), Verhalten (JavaScript) und Stil (CSS) auf flexible Weise – ideal für interaktive Webseiten und dynamische Inhalte.

Teste es selbst

Wende das Gelernte direkt an - probiere die Codes aus dem Tutorial aus oder experimentiere mit eigenen Ideen.