Element.classList
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
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");
Nota: 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
| Specification |
|---|
| DOM # ref-for-dom-element-classlist① |