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

Especificació Estat Comentari
HTML Living Standard
The definition of 'data-*' in that specification.		 Living Standard Sense canvis des de l'última instantània, HTML 5.1
HTML 5.1
The definition of 'data-*' in that specification.		 Recommendation Instantània de HTML Living Standard, sense canvis des de HTML5
HTML5
The definition of 'data-*' in that specification.		 Recommendation Instantània de HTML Living Standard, definició inicial.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic (Yes) 6 (6) (Yes) (Yes) (Yes)
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic (Yes) 6.0 (6) (Yes) (Yes) (Yes) (Yes)

Veure