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 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 Standard # ref-for-dom-element-classlist① |
Compatibilidad con navegadores
BCD tables only load in the browser