data-*

Note:

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
HTML Standard
# attr-data-*

Compatibilidade com navegadores

BCD tables only load in the browser

See also