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

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
data-* attributes

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also