4

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 2

5

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 all HTML elements.

The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database 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 elementos HTML.

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 chamadas Ajax ou consultas do BD 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>

1
  • Obrigado pelo esclarecimento @MarceloBonifazio
    – Ricardo
    Commented 13/02/2015 às 17:31
2

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
  • 1
    Obrigado pelo complemento @WallaceMaxters
    – Ricardo
    Commented 13/02/2015 às 17:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .