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
- All global attributes.
- The
HTMLElement.dataset
property that allows to access and modify these values.