data-*

Esta tradução está incompleta. Ajude atraduzir este artigo.

Os atributos globais data-* formam uma classe de atributos conhecida como custom data attributes, a qual permite que informações proprietárias sejam trocadas via script entre o HTML e sua representação DOM . Todos esses dados personalidados estão disponíveis através da interface HTMLElement do elemento, onde o atributo está definido. A propriedade HTMLElement.dataset concede acesso a estes atributos .
O * pode ser substituído por qualquer nome, desde que siga a regra de criação de nomes xml com as seguintes restrições:

  • O nome não deve começar com xml, independente da caixa destas letras (Ex: XML, xml, XMl, XmL, ...);
  • O nome não deve conter ponto e vírgula (U+003A);
  • O nome não deve conter letras maiúsculas.

Observe que a propriedade HTMLElement.dataset é uma DOMStringMap, e o nome da custom data attribute data-test-value será acessível através do HTMLElement.dataset.testValue ( ou HTMLElement.dataset["testValue"] ) e todo o traço (U+002D) será substituído pela capitalização(tornar maiúscula) da letra subsequente, deixando o nome no formato camelcase.

Uso

Para adicionar atributos data-* , mesmo os elementos HTML mais comuns podem tornar-se mais complexos e poderosos objetos programáveis.  Por exemplo, um "sprite" de uma nave espacial em um jogo pode ser um simples elemento <img> com um atributo class e diversos atributos data-*:

<img class="spaceship cruiserX3" src="shipX3.png"
  data-navio-id="324"   data-armas="laserI laserII"   data-escudos="72%"
  data-x="414354" data-y="85160" data-z="31940"
  onclick="navesespaciais[this.dataset.shipId].explodida()"
</img>

(Veja mais aqui)

Especificações

Specification Status Comment
WHATWG HTML Living Standard
The definition of 'data-*' in that specification.
Living Standard No change from latest snapshot, HTML5.1
HTML5.1
The definition of 'data-*' in that specification.
Recommendation Snapshot of WHATWG HTML Living Standard, no change from HTML5
HTML5
The definition of 'data-*' in that specification.
Recommendation Snapshot of  WHATWG HTML Living Standard, initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 6 (6) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 6.0 (6) (Yes) (Yes) (Yes) (Yes)

See also

Etiquetas do documento e colaboradores

 Colaboradores desta página: julianopoveda
 Última atualização por: julianopoveda,