Exemple
Utilisez le de data-* attribut pour intégrer des données personnalisées:
<ul>
<li data-animal-type="bird">Owl</li>
<li
data-animal-type="fish">Salmon</li>
<li
data-animal-type="spider">Tarantula</li>
</ul>
Essayez - le vous - même » Définition et utilisation
Le de data-* attributs est utilisé pour stocker des données personnalisées privé à la page ou à l' application.
Les data-* attributs nous donne la possibilité d'intégrer la coutume des data attributs sur tous les éléments HTML.
Le (personnalisé) les données stockées peuvent ensuite être utilisées en JavaScript de la page pour créer une expérience utilisateur plus engageante (sans appels Ajax ou des requêtes de base de données côté serveur).
Les data-* attributs se composent de deux parties:
- Le nom de l' attribut ne doit pas contenir des lettres majuscules, et doit être d' au moins un caractère de temps après le préfixe "data-" de "data-"
- La valeur d'attribut peut être une chaîne
Remarque: Les attributs personnalisés préfixées "data-" de "data-" sera complètement ignorés par l'agent utilisateur.
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge totalement l'attribut.
| Attribut | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
Différences entre HTML 4.01 et HTML5
Les data-* attributs sont nouveaux dans HTML5.
Syntaxe
<elementdata-*=" somevalue ">
Attribut valeurs
| Valeur | La description |
|---|---|
| somevalue | Indique la valeur de l'attribut (sous forme de chaîne) |
Pages associées
Tutoriel HTML: Attributs HTML
HTML DOM Référence: HTML DOM getAttribute() Méthode