Tenho visto em vários código HTML marcações como: data-value, data-title, quase sempre são nomes de atributos de tags com o sufixo: data-, gostaria de saber o que significam e sem tem alguma recomendação de uso/vantagem de uso.
2 Respostas
São atributos incluídos a partir do HTML5
.
Basicamente são atributos utilizados para auxiliar o desenvolvedor em consultas dinâmicas na própria página sem ser necessário o acesso a um servidor -> BD
.
Os dados já poderiam vir montados na própria página quando solicitados ao servidor, e caso alguma interação do usuário, são de fácil acesso via JavaScript
ou CSS
.
The
data-*
attributes is used to store custom data private to the page or application.The
data-*
attributes gives us the ability to embed custom data attributes on allHTML
elements.The stored (custom) data can then be used in the page's
JavaScript
to create a more engaging user experience (without anyAjax
calls or server-sidedatabase
queries).
Os atributos
data-*
são usado para armazenar dados personalizados privada para a página ou aplicativo.Os atributos
data-*
nós dão a capacidade de incorporar atributos de dados personalizados em todos os elementosHTML
.Os dados armazenados podem então, ser usados no
JavaScript
da página para criar uma experiência mais agradável ao usuário (sem ser necessário qualquer chamadasAjax
ou consultas doBD
do lado do servidor).
Fonte: w3schools
EXEMPLO
$(".teste").click(function() {
pais = $(this).data("country");
if(pais =="Brasil") {
alert("Brasileiro!");
}else{
alert("Americano!");
}
});
.teste[data-country=Brasil] {
color: yellow;
background-color:green;
}
.teste[data-country=USA] {
color: red;
background-color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="teste" data-name="Marcelo Bonifazio" data-city="São Paulo" data-state="SP"
data-country="Brasil" data-lang="pt-br">
Clique-Aqui!
</li>
<li class="teste" data-name="Ricardo Henrique" data-city="Oklahoma City" data-state="Oklahoma" data-country="USA" data-lang="EN-en">
Clique-Aqui!
</li>
Muito bem explicado pelo amigo @MarceloBonifazio.
Porém, apenas uma correção: O exemplo Javascript
seria na verdade feito pela biblioteca jQuery
.
Sem jQuery, a forma de se obter esses dados vindo do atributo data
é feito através do objeto dataset
, que vem "dentro" do elemento que é selecionado pelo javascript.
Veja:
HTML:
<div data-nome="Stackoverflow" id="teste"></div>
Javascript:
var element = document.querySelector('#teste');
// obtém os dados
console.log(element.dataset.nome); // Stackoverflow
//define o dado
element.dataset.nome = 'SOPT';
Além disso, as formas com que o atributo data
é tratado são diferentes, quando comparamos o seu uso entre Javascript
puro e jQuery
Isso me causava confusão. Minha dúvida foi tirada nessa pergunta que realizei aqui no SOPT.
Veja um pequeno exemplo do código funcionando no JSFIDDLE
-
1