Element.classList

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 devuelve true.
Cuando el segundo argumento está presente: Si el segundo argumento se evalúa como true, se añade la clase indicada, y si se evalúa como false, 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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
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.

Vea también