La propiedad de sólo lectura Element.classList
devuelve una colección activa de DOMTokenList
de los atributos de clase del elemento.
Usar classList
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 element.className
.
Sintaxis
var elementClasses = elementNodeReference.classList;
elementClasses es un DOMTokenList que representa el atributo clase de elementNodeReference. Si el atributo clase no está definido o está vacío, elementClasses.length devuelve 0. element.classList
por sí mismo es de sólo lectura, aunque puede ser modificado usando los métodos add()
y remove()
.
Métodos
- add( String [, String] )
- Añade las clases indicadas. Si estas clases existieran en el atributo del elemento serán ignoradas.
- remove( String [, String] )
- Elimina las clases indicadas.
Nota: Eliminar una clase que no existe NO produce un error. - item( Number )
- Devuelve el valor de la clase por índice en la colección.
- toggle( String [, force] )
- Cuando sólo hay un argumento presente: Alterna el valor de la clase; ej., si la clase existe la elimina y devuelve
false
, si no, la añade y devuelvetrue
.
Cuando el segundo argumento está presente: Si el segundo argumento se evalúa comotrue
, se añade la clase indicada, y si se evalúa comofalse
, la elimina. - contains( String )
- Comprueba si la clase indicada existe en el atributo de clase del elemento.
- replace( oldClass, newClass )
- Reemplaza una clase existente por una nueva.
Ejemplos
// 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");
Las versiones de Firefox anteriores a la 26 no implementan el uso de múltiples argumentos en los métodos add/remove/toggle. Vea https://bugzilla.mozilla.org/show_bug.cgi?id=814014
Especificaciones
Especificación | Estado | Comentario |
---|---|---|
HTML Living Standard La definición de 'Element.classList' en esta especificación. |
Living Standard | Nota en la especificación de HTML relacionada con el atributo class . |
DOM La definición de 'Element.classList' en esta especificación. |
Living Standard | Definición inicial |
DOM4 La definición de 'Element.classList' en esta especificación. |
Obsolete |
Compatibilidad con navegadores
Característica | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Soporte básico | 8 | 12 | 3.6 (1.9.2) | 10[1] | 11.50 | 5.1 |
Segundo argumento del método toggle() |
24 | 12 | 24 (24) | Sin soporte[2] | 15 | 7 |
Múltiples argumentos para add() y remove() |
28 | 12 | 26 (26) | Sin soporte | 15 | 7 |
replace() |
61 | ? | 49 (49) | Sin soporte | Sin soporte | Sin soporte |
Característica | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Soporte básico | 3.0 | 12 | 1.0 (1.9.2) | 10[1] | 11.10 | 5.0 |
Segundo argumento del método toggle() |
4.4 | 12 | 24.0 (24) | Sin soporte[2] | ? | 7.0 |
Múltiples argumentos para add() y remove() |
4.4 | 12 | ? | Sin soporte | ? | 7.0 |
replace() |
Sin soporte | Sin soporte | 49 (49) | Sin soporte | Sin soporte | Sin soporte |
[1] No soportado para elementos SVG. Vea un informe de Microsoft acerca de esto.
[2] Internet Explorer no lo implementa actualmente. Vea un informe de Microsoft acerca de esto.