data-*

Els atributs globals data-* formen una classe d'atributs anomenats atributs de dades personalitzades, que permeten que la informació propietària s'intercanviï entre l' HTML i la seva representació DOM mitjançan scripts. Totes aquestes dades personalitzades estan disponibles a través de la interfície HTMLElement de l'element en el qual s'estableix l'atribut. La propietat HTMLElement.dataset li dóna accés. El * pot ser reemplaçat per qualsevol nom que segueix la regla de producció de noms XML amb les següents restriccions:

• el nom no ha de començar amb xml, qualsevol que sigui el cas que s'utilitzi per a aquestes lletres;
• el nom no ha de contenir cap punt i coma (U+003A);
• el nom no ha de contenir majúscules de l'A a la Z.

Recordeu que la propietat HTMLElement.dataset és un DOMStringMap, i el nom de l'atribut de dades personalitzades data-test-value serà accessible a través de HTMLElement.dataset.testValue ( o HTMLElement.dataset["testValue"] ) com qualsevol guió (u+002D) se substitueix la següent lletra en majúscula, convertint el nom a (CamelCase).

Ùs

Mitjançant la incorpoarció d'atributs data-*, fins i tot els elements HTML ordinaris poden convertir-se en programes-objectes força complexos i potents. Per exemple, una nau espacial "sprite" en un joc podria ser un simple element <img> amb un atribut class i diversos atributs data- *:

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

(Veure més aquí)

Especificacions

Navegadors compatibles

Veure

• Tots els atributs globals.
• La propietat HTMLElement.dataset permet accedir i modificar aquests valors.