Propiedad classList

La propiedad classList contiene un pseudoarray de clases CSS del elemento, y también permite agregar y eliminar clases del elemento, verificar la presencia de una clase específica entre las clases del elemento.

Se trata del atributo class, dentro del cual se pueden escribir varias clases separadas por espacios, por ejemplo www ggg zzz. Con classList se puede eliminar, por ejemplo, la clase ggg, sin afectar las demás clases.

Sintaxis

elemento.classList;

Ejemplo . Cantidad de clases

Averigüemos la cantidad de clases del elemento:

<p id="elem" class="www ggg zzz"></p>

let elem = document.querySelector('#elem');

let length = elem.classList.length;
console.log(length);

Resultado de la ejecución del código:

3

Ejemplo . Iteramos sobre las clases

Mostremos las clases del elemento una por una:

<p id="elem" class="www ggg zzz"></p>

let elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
	console.log(className);
}

Resultado de la ejecución del código:

'www'
'ggg'
'zzz'

Véase también

método classList.add,
que agrega la clase especificada
método classList.remove,
que elimina la clase especificada
método classList.contains,
que verifica la clase especificada
método classList.toggle,
que alterna la clase especificada