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

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!

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,