data-*

Les attributs universels data-* forment une classe d'attributs, appelés attributs de données (data attributes). Ils permettent d'échanger des données propriétaire entre le HTML et la représentation du DOM, qu'on peut manipuler avec des scripts. De tels attributs sont disponibles via l'interface HTMLElement de l'élément pour lequel l'attribut est utilisé. La propriété HTMLElement.dataset permet d'accéder à l'attribut.
Ici, l'astérisque (*) peut être remplacée par n'importe quel nom valide selon les règles appliquées aux noms XML et en respectant les contraintes suivantes :

  • Le nom ne peut pas commencer par xml, quelle que soit la casse utilisée pour les différentes lettres
  • Le nom ne doit pas contenir de point-virgule (U+003A)
  • Le nom ne doit pas contenir de lettres majuscules de l'alphabet latin (A à Z).

La propriété HTMLElement.dataset est un objet StringMap et la valeur d'un attribut de donnée nommé data-test-valeur sera accessible via HTMLElement.dataset.testValeur car les tirets (U+002D) sont remplacés par la majuscule de la lettre suivante (CamelCase).

Utilisation

Lorsqu'on ajoute des attributs de données data-*, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, un sprite d'un vaisseau spatial dans un jeu peut être modélisé via un élément <img> auquel on associ un attribut class et plusieurs attributs de données sous la forme data-*.

<img class="spaceship cruiserX3" src="shipX3.png"
     data-ship-id="324" data-weapons="laserI laserII"
     data-x="414354" data-y="85160" data-z="31940"
     onclick="spaceshpis[this.dataset.shipId].blasted()">
</img>

Spécifications

Spécification État Commentaires
WHATWG HTML Living Standard
La définition de 'data-*' dans cette spécification.
Standard évolutif Pas de modification depuis la dernière dérivation, HTML5.1
HTML5.1
La définition de 'data-*' dans cette spécification.
Recommendation Dérivée de WHATWG HTML Living Standard, pas de changement depuis HTML5
HTML5
La définition de 'data-*' dans cette spécification.
Recommendation Dérivée de WHATWG HTML Living Standard, définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui) 6 (6) (Oui) (Oui) (Oui)
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) 6.0 (6) (Oui) (Oui) (Oui) (Oui)

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,