Esta tradução está incompleta. Por favor, ajude a traduzir 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 personalizados 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
HTML Living Standard
The definition of 'data-*' in that specification.
Padrão em tempo real No change from latest snapshot, HTML 5.1
HTML 5.1
The definition of 'data-*' in that specification.
Recomendação Snapshot of HTML Living Standard, no change from HTML5
HTML5
The definition of 'data-*' in that specification.
Recomendação Snapshot of  HTML Living Standard, initial definition.

Browser compatibility

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

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: linconkusunoki, julianopoveda
Última atualização por: linconkusunoki,