1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
---
title: Utilizando data attributes
slug: Learn/HTML/Howto/Use_data_attributes
translation_of: Learn/HTML/Howto/Use_data_attributes
original_slug: Web/Guide/HTML/Using_data_attributes
---
<p>O <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido. <a href="/en-US/docs/Web/HTML/Global_attributes#data-*">Atributos data-* </a>nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como <a href="/en-US/docs/Web/API/Element.classList">classList</a>, atributos fora do padrão, propriedades extras no DOM ou o método depreciado <a href="/en-US/docs/Web/API/Node.setUserData">setUserData</a>.</p>
<h2 id="Sintaxe_HTML">Sintaxe HTML</h2>
<p>A sintaxe é simples. Qualquer atributo de qualquer elemento no qual o nome do atributo inicia com <code>data-</code> é um atributo data. Digamos que você possui um article e quer armazenar informações extras que não possuem nenhuma representação visual. Use atributos data para isso:</p>
<pre class="brush: html"><article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article></pre>
<h2 id="Acesso_no_JavaScript">Acesso no JavaScript</h2>
<p>Ler os valores destes atributos via <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> é muito simples também. Você pode lê-los usando {{domxref("Element.getAttribute", "getAttribute()")}} com o nome html completo, mas a forma padrão provê uma alternativa mais simples: um {{domxref("DOMStringMap")}} pode ser lido através da propriedade {{domxref("HTMLElement.dataset", "dataset")}}.</p>
<p>Para obter o atributo data através do objeto <code>dataset</code>, acesse a propriedade utilizando a parte do nome do atributo após o prefixo <code>data-</code> (note que o hífen é convertido para camelCase).</p>
<pre class="brush: js">var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"</pre>
<p>Cada propriedade é uma String e pode ser lida e escrita. No exemplo acima a atribuição <code>article.dataset.columns = 5</code> iria alterar esse atributo para "5".</p>
<h2 id="Acesso_no_CSS">Acesso no CSS</h2>
<p>Note que os atributos data são atributos em HTML puro, e você pode inclusive acessá-los via <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>. Por exemplo, para mostrar o elemento pai em um artigo, você pode usar <a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">conteúdo gerado</a> em CSS com a função {{cssxref("attr")}}:</p>
<pre class="brush: css">article::before {
content: attr(data-parent);
}</pre>
<p>Pode-se também usar os <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">seletores de atributos</a> em CSS para alterar estilos de acordo com o atributo data:</p>
<pre class="brush: css">article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}</pre>
<p>Pode-se tudo isso em funcionamento neste <a href="http://jsbin.com/ujiday/2/edit">exemplo JSBin</a>.</p>
<p>Atributos data também podem ser utilizados para conter informações que mudam constantemente, como a pontuação em um jogo. Usando seletores CSS e acesso com JavaScript permite que se construa efeitos excelentes sem ter que escrever suas próprias rotinas de display. Veja <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">esta tela</a> para um exemplo utilizando conteúdo gerado e transições CSS (<a href="http://jsbin.com/atawaz/3/edit">exemplo JSBin</a>).</p>
<p><span style="line-height: 16.7999992370605px;">Uma vez que valores data são strings, todos os valores devem estar entre aspas ou então a estilização não fará efeito.</span></p>
<h2 id="Issues">Issues</h2>
<p>Não armazene conteúdo que deve estar visível e acessível nos atributos data porque tecnologias assistivas podem não acessá-los. Além disso, motores de busca podem não indexar os valores dos atributos data. </p>
<p>Os principais issues a serem considerados são com suporte e performance no Internet Explorer. O Internet Explorer 11+ provê suporte para o padrão, mas todas as versões anteriores <a href="http://caniuse.com/#feat=dataset">não suportam <code>dataset</code></a>. Para suporte ao IE 10 e anteriores, deve-se acessar atributos data através de {{domxref("Element.getAttribute", "getAttribute()")}} . E ainda, a <a href="http://jsperf.com/data-dataset">performance de leitura dos atributos data</a> é ruim, comparada com o armazenamento em um data warehouse JS. O uso de <code>dataset</code> é até pior que a leitura dos dados com <code>getAttribute()</code>.</p>
<p>Apesar do que foi colocado, para metadados customizados associados a elementos, eles são uma ótima solução.</p>
<p>No Firefox 49.0.2 (e talvez em versões anteriores/posteriores), os atributos data que excederem 1022 caracteres não serão lidos pelo Javascript (EcmaScript 4).</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>Este artigo é uma adaptação de <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Usando atributos data em JavaScript e CSS no hacks.mozilla.org</a>.</li>
<li><a href="http://www.sitepoint.com/use-html5-data-attributes/">Como usar atributos data em HTML5</a> (Sitepoint)</li>
</ul>
|
