SOBRE O ATRIBUTO "CUSTOM DATA"
O HTML5 foi criado com o objetivo de tornar os dados acessíveis por parte dos elementos tanto para os computadores quanto para os usuários já que algum tempo atrás para colocar dados extras nos elementos era necessário usar o atributo class:
<div id="produto" class="tamanho-42 cor-azul preco-80">
Isso meio que ficava sem sentido já que as classes são usadas para alguma
determinada representação visual relacionada à múltiplos elementos e no caso do código acima é apenas informações extras que eu quero dar para o elemento e não alguma estilização.
Além disso, eu posso já estar usando o atributo class
na minha aplicação por uma mesma classe do CSS o que pode dar estilos indevidos ao meu elemento.
Pensando nisso foi criado o atributo data-* ou conhecido também como (Atributo de dados personalizados do inglês Custom Data Attribute) que facilitam o processo em adicionar dados sem nenhuma representação visual. A sintaxe é bem simples com o conjunto do prefixo data-
, depois o nome que você deseja e por fim o valor que você quer adicionar ao atributo:
data-nome="valor"
Agora o mesmo exemplo acima ficaria assim:
<div id="produto" data-tamanho="42" data-cor="azul" data-preco="80">
Também poderíamos dar apenas o nome ao atributo e depois em algum determinado momento adicionar algum valor a ele:
<div id="produto" data-tamanho data-cor data-preco>
Ou também poderíamos remover o prefixo data-
e adicionar apenas o nome ao atributo:
<div id="produto" tamanho="42" cor="azul" preco="80">
Acontece que o navegador não identifica como um “erro” a não utilização do prefixo data-*
, mas sim como apenas um novo atributo que foi criado para aquele elemento, porém não é recomendável a remoção do prefixo data-*
por questões de padronização segundo a W3C.
Já que isso acaba evitando conflitos que podem ocorrer na linguagem e no seu código que é o caso de você não seguir o padrão e criar o mesmo nome que será utilizado por um elemento no futuro, aqui pode causar resultados inconvenientes.
ACESSANDO OS DADOS VIA JAVASCRIPT
Para acessar os dados você pode usar duas maneiras comuns que é por meio do atributo getAttribute() (recomendado para versões IE 10 e anteriores que não suportam o atributo data-*
):
let produto = document.getElementById('produto');
let produtoTamanho = produto.getAttribute("data-tamanho");
let produtoCor = produto.getAttribute("data-cor");
let produtoPreco = produto.getAttribute("data-preco");
console.log(produtoTamanho);
console.log(produtoCor);
console.log(produtoPreco);
<div id="produto" data-tamanho="42" data-cor="azul" data-preco="80"></div>
Ou você pode usar uma alternativa muito mais simples que é por meio da propriedade dataset:
let produto = document.getElementById('produto');
console.log(produto.dataset.tamanho);
console.log(produto.dataset.cor);
console.log(produto.dataset.preco);
<div id="produto" data-tamanho="42" data-cor="azul" data-preco="80"></div>
Você ainda pode adicionar novos valores com a propriedade dataset
:
produto.dataset.tamanho = 35;
produto.dataset.cor = "vermelho";
produto.dataset.preco = 65.80;
ACESSANDO OS DADOS VIA CSS
Você pode usar a função attr em conjunto com a propriedade content e pseudo-elements ::before ou ::after para acessar os dados:
#produto::before {
content: attr(data-tamanho) ", " attr(data-cor) ", " attr(data-preco);
}
<div id="produto" data-tamanho="42" data-cor="azul" data-preco="80"></div>