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
|
---
title: Element.classList
slug: Web/API/Element/classList
tags:
- API
- DOM
- Elemento
- Propiedad
- Referencia
- Sólo-Lectura
translation_of: Web/API/Element/classList
---
<div>{{APIRef("DOM")}}</div>
<p>La propiedad de sólo lectura <code><strong>Element.classList</strong></code> devuelve una colección activa de <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList" title="The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList or HTMLAreaElement.relList. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive."><code>DOMTokenList</code></a> de los atributos de clase del elemento.</p>
<p>Usar <code>classList</code> es una forma práctica de acceder a la lista de clases de un elemento como una cadena de texto delimitada por espacios a través de {{domxref("element.className")}}.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">var <var>elementClasses</var> = elementNodeReference.classList;
</pre>
<p><em>elementClasses</em> es un <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a> que representa el atributo clase de <em>elementNodeReference</em>. Si el atributo clase no está definido o está vacío, <em>elementClasses.length</em> devuelve 0. <code>element.classList</code> por sí mismo es de sólo lectura, aunque puede ser modificado usando los métodos<code> add()</code> y <code>remove()</code>.</p>
<h2 id="Métodos">Métodos</h2>
<dl>
<dt>add( String [, String] )</dt>
<dd>Añade las clases indicadas. Si estas clases existieran en el atributo del elemento serán ignoradas.</dd>
<dt>remove( String [, String] )</dt>
<dd>Elimina las clases indicadas.<br>
<strong>Nota:</strong> Eliminar una clase que no existe NO produce un error.</dd>
<dt><strong>item</strong>( Number )</dt>
<dd>Devuelve el valor de la clase por índice en la colección.</dd>
<dt><strong>toggle</strong>( String [, force] )</dt>
<dd>Cuando sólo hay un argumento presente: Alterna el valor de la clase; ej., si la clase existe la <u>elimina</u> y devuelve <code>false</code>, si no, la <u>añade</u> y devuelve <code>true</code>.<br>
Cuando el segundo argumento está presente: Si el segundo argumento se evalúa como <code>true</code>, se añade la clase indicada, y si se evalúa como <code>false</code>, la elimina.</dd>
<dt>contains( String )</dt>
<dd>Comprueba si la clase indicada existe en el atributo de clase del elemento.</dd>
<dt>replace( oldClass, newClass )</dt>
<dd>Reemplaza una clase existente por una nueva.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<pre class="brush: js" dir="rtl">// div es una referencia de objeto al elemento <div> con class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");
// si visible está presente la elimina, de lo contrario la añade
div.classList.toggle("visible");
// añadir/eliminar visible, dependiendo de la condición, i menor que 10
div.classList.toggle("visible", i < 10 );
alert(div.classList.contains("foo"));
// añadir o eliminar varias clases
div.classList.add("foo", "bar");
div.classList.remove("foo", "bar");
// reemplazar la clase "foo" por "bar"
div.classList.replace("foo", "bar");</pre>
<div class="note">
<p>Las versiones de Firefox anteriores a la 26 no implementan el uso de múltiples argumentos en los métodos add/remove/toggle. Vea <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="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>Nota en la especificación de HTML relacionada con el atributo {{htmlattrxref("class")}}.</td>
</tr>
<tr>
<td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
<td>{{Spec2("DOM WHATWG")}}</td>
<td>Definición inicial</td>
</tr>
<tr>
<td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
<td>{{Spec2("DOM4")}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
{{Compat("api.Element.classList")}}
<h2 id="Vea_también">Vea también</h2>
<ul>
<li>{{domxref("element.className")}}</li>
<li>{{domxref("DOMTokenList")}};</li>
</ul>
|
