La propiedad de sólo lecturaElement.classList devuelve una colección activa deDOMTokenList de los atributos de clase del elemento.

UsarclassList 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 deelement.className.

Sintaxis

var elementClasses = elementNodeReference.classList;

elementClasses es unDOMTokenList que representa el atributo clase deelementNodeReference. 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étodosadd() yremove().

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 laelimina y devuelvefalse, si no, laañ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> condiv.classList.remove("foo");div.classList.add("anotherclass");// si visible está presente la elimina, de lo contrario la añadediv.classList.toggle("visible");// añadir/eliminar visible, dependiendo de la condición, i menor que 10div.classList.toggle("visible", i < 10);alert(div.classList.contains("foo"));// añadir o eliminar varias clasesdiv.classList.add("foo", "bar");div.classList.remove("foo", "bar");// reemplazar la clase "foo" por "bar"div.classList.replace("foo", "bar");

Especificaciones

Compatibilidad con navegadores

Véase también

• element.className
• DOMTokenList;