Uso do atributo data-* em JavaScript e CSS
Publicado em: 2012-10-11 — 21.540 visualizacoes
Uma das funcionalidades, relativas à extensibilidade, previstas para inclusão nas especificações para a HTML5 diz respeito ao armazenamento de dados na própria marcação. Dados estes, que não serão visíveis (ou acessíveis) ao usário. O atributo data-* permite ao autor armazenar informações extras em elementos HTML sem a necessidade de uso de um elemento não semântico ou de poluir os nomes de classes, como fazíamos na HTML anterior com o uso de atributos personalizados.
Os atributos data-* podem ser usados de variadas maneiras; algumas de forma errada e outras de forma bastante útil e acertada. A regra de bolso para determinar seu uso é: conteúdo que deve ser visível e acessível não deve ser armazenado no atributo data-*. A razão é que tecnologias assistivas não terão acesso aos dados e robôs de busca não os indexarão.
A sintaxe é fácil. O exemplo a seguir demonstra a sintaxe para armazenar informações extras, dados não visíveis, em um elemento article com uso do atributo data-*:
1.<article 2. id="electriccars" 3. data-columns="3" 4. data-indexnumber="12314" 5. data-parent="cars"> 6. ... 7.</article>Acessar os dados com JavaScript é muito simples. Você pode usar o método getAttribute para inspecionar os dados, mas a HTML5 define um meio simples para tal: a DOMStringMap que prevê a propriedade dataset:
1. 2. 3.var article = document.querySelector('#electriccars'), data = article.dataset; 4.// data.columns -> "3" 5.// data.indexnumber -> "12314" 6.// data.parent -> "cars"Cada valor retornado da propriedade é uma string (mesmo que não se use aspas no valos na marcação HTML). A propriedade é para leitura e definição do valor. No exemplo mostrado anteriormente definindo article.dataset.columns = 5 altera o valor do dado columns.
Uma vez que os atributos data-* são atributos normais da HTML eles podem ser acessados via CSS. Por exemplo: para acessar e mostrar data.parent do elemento article podemos usar a seguinte declaração CSS:
1.article::before { 2. content: attr(data-parent); 3.}Você pode ainda usar o seletor de atributo das CSS para estilizar um elemento baseado no valor de um dado:
1.article[data-columns='3'] { 2. width: 400px; 3.}4. 5.article[data-columns='4'] { 6. width: 600px; 7.}Esses exemplos estão disponíveis em exemplos no JSBin .
O atributo data-* pode ser usado para armazenar informações que estão em constante mudança, tal como, scores em um jogo. Usar seletores CSS e JavaScript nesses casos pode produzir efeitos bem interessantes sem necessidade de criar rotinas de apresentação. Veja esse screencast que demonstra o uso de geração de conteúdo com CSS e transições:
O código mostrado no screencast está disponível no JSBin.
Problemas com o atributo data-*
Infelizmente a regra geral para coisas simples e úteis é que sempre há um preço a pagar. Nesse caso o grande problema a considerar é que o Internet Explorer não suporta dataset e você precisa usar getAttribute(). O outro problema é que a performance para leitura de atributos data-* comparada com o armazenamento de dados em JS é ruim. Usar dataset para ler dados é mais lento do que quando usa-se getAttribute().
Concluindo podemos afirmar que o uso do atributo data-* é uma boa solução para armazenar dados que não serão mostrados e vamos torcer para que a próxima versão do IE oferecendo suporte para essa funcionalidade venha logo.
Créditos: Este artigo é um tradução. O artigo original de autoria de Chris Heilmann foi publicado em: Using data-* attributes in JavaScript and CSS
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2012-10-11 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2012/10/11/uso-do-atributo-data-em-javascript-e-css/trackback no seu site.
Ótimo Conteúdo porem a Vídeo Aula Só Falto Ser Português ‘-‘
Muito bom, já venho utilizando esse attr, é muito útil!
Parabéns!