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

BCD tables only load in the browser