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 (en-US) de l'element en el qual s'estableix l'atribut. La propietat HTMLElement.dataset (en-US) 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 (en-US) és un DOMStringMap (en-US), 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! (en-US)

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