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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
---
title: Element.classList
slug: Web/API/Element/classList
translation_of: Web/API/Element/classList
---
<div>{{APIRef("DOM")}}</div>
<p>O <strong>E</strong><strong>lement.classList</strong> é uma propriedade somente leitura que retorna uma coleção {{domxref ("DOMTokenList")}} ativa dos atributos de classe do elemento.</p>
<p>Usar <strong>classList</strong> é uma alternativa conveniente para acessar a lista de classes de um elemento como uma seqüência delimitada por espaço através de {{domxref ("element.className")}}.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList;
</pre>
<p><strong><em>elementClasses</em></strong> é um DOMTokenList que representa o atributo de classe de <strong><em>elementNodeReference</em></strong>. Se o atributo de classe não foi definido ou está vazio <strong><em>elementClasses.length</em></strong> retorna 0. <strong>element.classList </strong>propriamente dito é somente leitura, embora você possa modificá-lo usando os métodos<em> <strong>add ()</strong></em><strong> </strong>e <em><strong>remove ()</strong></em>.</p>
<h2 id="Métodos">Métodos</h2>
<dl>
<dt>add( String [, String] )</dt>
<dd>Adicione valores de classe especificados. Se essas classes já existem no atributo do elemento, elas são ignoradas.</dd>
<dt>remove( String [,String] )</dt>
<dd>Remover valores de classe específicos.</dd>
<dt><strong>item</strong> ( Number )</dt>
<dd>Retorna o valor da classe por índice na coleção.</dd>
<dt><strong>toggle</strong> ( String [, force] )</dt>
<dd>Quando apenas um argumento está presente: Toggle class value; Ou seja, se a classe existir, em seguida, removê-lo e retornar false, se não, então adicioná-lo e retornar true.<br>
Quando um segundo argumento está presente: Se o segundo argumento é avaliado como true, adicione o valor especificado da classe e, se ele for avaliado como false, remova-o.</dd>
<dt>contains( String )</dt>
<dd>Verifica se o valor da classe especificado existe no atributo de classe do elemento.</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<pre class="brush: js" dir="rtl">// div é uma referência de objeto para um elemento <div> com class = "foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");
// Se estiver visível, remova-o, caso contrário, adicione-o
div.classList.toggle("visible");
// adicionar/remover, dependendo do teste condicional, i menos de 10
div.classList.toggle("visible", i < 10 );
alert(div.classList.contains("foo"));
// adicionar ou remover várias classes
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");</pre>
<div class="note">
<p>As versões do Firefox antes de 26 não implementam o uso de vários argumentos nos métodos add / remove / toggle. Veja <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
</div>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>Observe dentro da especificação HTML relacionada ao {{htmlattrxref("class")}} attribute.</td>
</tr>
<tr>
<td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
<td>{{Spec2("DOM WHATWG")}}</td>
<td>Definição inicial</td>
</tr>
<tr>
<td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
<td>{{Spec2("DOM4")}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>8.0</td>
<td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
<td>{{CompatGeckoDesktop("1.9.2")}}</td>
<td>10<sup>[1][3]</sup></td>
<td>11.50</td>
<td>5.1</td>
</tr>
<tr>
<td>toggle method's second argument</td>
<td>24</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("24")}}</td>
<td>{{CompatNo}}<sup>[2]</sup></td>
<td>15</td>
<td>5.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>3.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.9.2")}}</td>
<td>10</td>
<td>11.10</td>
<td>5.0</td>
</tr>
<tr>
<td>toggle method's second argument</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("24")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Não suportado para elementos SVG. Veja <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">a report at Microsoft about that</a>.<br>
[2] O Internet Explorer nunca implementou isso. Veja <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">a report at Microsoft about that</a>.<br>
[3] Internet Explorer usa apenas o primeiro parâmetro em "add" e "remove".</p>
<p> </p>
<p> </p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{domxref("element.className")}}</li>
<li>{{domxref("DOMTokenList")}};</li>
</ul>
|
