Lesattributs universelsdata-* forment une classe d'attributs, appelés attributs de données (data attributes). Ils permettent d'échanger des données propriétaire entre leHTML et la représentation duDOM, qu'on peut manipuler avec des scripts.

Exemple interactif

<h1>Secret agents</h1><ul>  <li data-id="10784">Jason Walters, 003: Found dead in "A View to a Kill".</li>  <li data-id="97865">    Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in    "Goldeneye".  </li>  <li data-id="45732">    James Bond, 007: The main man; shaken but not stirred.  </li></ul>

h1 {  margin: 0;}ul {  margin: 10px 0 0;}li {  position: relative;  width: 200px;  padding-bottom: 10px;}li:after {  content: "Data ID: " attr(data-id);  position: absolute;  top: -22px;  left: 10px;  background: black;  color: white;  padding: 2px;  border: 1px solid #eee;  opacity: 0;  transition: 0.5s opacity;}li:hover:after {  opacity: 1;}

De tels attributs sont disponibles via l'interfaceHTMLElement 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 selonles règles appliquées aux noms XML et en respectant les contraintes suivantes :

• Le nom ne peut pas commencer parxml, 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 objetStringMap et la valeur d'un attribut de donnée nommédata-test-valeur sera accessible viaHTMLElement.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éesdata-*, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, unsprite d'un vaisseau spatial dans un jeu peut être modélisé via un élément<img> auquel on associe un attributclass et plusieurs attributs de données sous la formedata-*.

<img src="shipX3.png"     data-ship-id="324" data-weapons="laserI laserII"     data-x="414354" data-y="85160" data-z="31940"    ></img>

Pour un tutoriel plus avancé à propos des attributs de données HTML, lire l'articleManipuler les attributs de données.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les différents attributs universels
• La propriétéHTMLElement.dataset qui permet d'accéder à ces valeurs et de les modifier.