Beispiel
Verwenden Sie die data-* Attribut 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>
Versuch es selber " Definition und Verwendung
Die data-* Attribute wird verwendet , um benutzerdefinierte Daten zu speichern , privat auf die Seite oder Anwendung.
Die data-* Attribute gibt uns die Möglichkeit , benutzerdefinierte einzubetten data auf alle HTML - Elemente.
Die gespeicherte (custom) Daten können dann in der JavaScript-Seite verwendet werden, ein ansprechender Benutzererfahrung zu schaffen (ohne Ajax-Aufrufe oder serverseitige Datenbankabfragen).
Die data-* Attribute bestehen aus zwei Teilen:
- Der Attributname darf keine Großbuchstaben verwenden , und muss mindestens ein Zeichen lang sein , nachdem das Präfix "data-"
- Der Attributwert kann eine beliebige Zeichenfolge sein
Hinweis: Benutzerdefinierte Attribute mit dem Präfix "data-" wird vollständig durch den User - Agent ignoriert werden.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die das Attribut vollständig unterstützt.
| Attribut | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
Unterschiede zwischen HTML 4.01 und HTML5
Die data-* Attribute sind neu in HTML5.
Syntax
<elementdata-*=" somevalue ">
Werte Attribut
| Wert | Beschreibung |
|---|---|
| somevalue | Gibt den Wert des Attributs (als String) |
Verwandte Seiten
HTML - Tutorial: HTML Attribute
HTML - DOM Referenz: HTML DOM getAttribute() Methode