HTML data-* Attribut
Definition und Verwendung
Das
data-*Attribut wird verwendet, um benutzerdefinierte Daten privat für die Seite oder Anwendung zu speichern.
Das
data-*Attribut gibt uns die Möglichkeit, benutzerdefinierte Datenattribute in alle HTML-Elemente einzubetten.
Die gespeicherten (benutzerdefinierten) Daten können dann im JavaScript der Seite verwendet werden, um ein ansprechenderes Benutzererlebnis zu schaffen (ohne Ajax-Aufrufe oder serverseitige Datenbankabfragen).
Das
data-*Attribut besteht aus zwei Teilen:
- Der Attributname darf keine Großbuchstaben enthalten und muss mindestens ein Zeichen lang nach dem Präfix „data-“ stehen.
- Der Attributwert kann eine beliebige Zeichenfolge sein
Hinweis: Benutzerdefinierte Attribute mit dem Präfix „data-“ werden vom Benutzeragenten vollständig ignoriert.
Gilt für
Das
data-*Attribut ist ein globales Attribut und kann für jedes HTML-Element verwendet werden.
| Element | Attribut |
|---|---|
| Alle HTML-Elemente | Daten-* |
Beispiel
Beispiel
Verwenden Sie das Attribut data-*, um benutzerdefinierte Daten einzubetten:
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Attribut vollständig unterstützt.
| Attribute | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |