Manipular Clases CSS con JavaScript Usando classList

Manipular clases CSS con JavaScript es una técnica esencial para controlar el estilo visual de los elementos del DOM de forma dinámica y limpia. En lugar de modificar propiedades CSS directamente con .style, una práctica mucho más escalable consiste en trabajar con clases —por ejemplo, para mostrar u ocultar un menú, cambiar el estado de un botón o aplicar validaciones visuales.

La mejor forma de hacerlo es con el objeto classList, una API moderna y robusta que permite añadir, eliminar, alternar o verificar clases con una sintaxis clara y segura.

En este artículo aprenderás cómo usar classList con todos sus métodos (add(), remove(), toggle(), contains()), qué ventajas ofrece sobre className y cómo aplicarlo correctamente para construir componentes web más escalables, legibles y mantenibles.

¿Qué es classList y para qué sirve?

classList es una propiedad que pertenece a cualquier nodo del DOM que soporte clases, como div, button, p, etc. Al acceder a ella, obtenemos un objeto de tipo DOMTokenList, que representa la lista de clases aplicadas al elemento.

Esto nos permite usar métodos específicos para añadir, eliminar, verificar o alternar clases, sin necesidad de manipular cadenas de texto directamente.

const caja = document.getElementById("caja");
console.log(caja.classList); // DOMTokenList(2) ['azul', 'sombra']

Aunque se parece a un array, classList no lo es. Para usar métodos funcionales como map(), primero deberías convertirlo con Array.from().

Agregar clases con classList.add()

Agregar clases a un elemento HTML es una de las formas más comunes de aplicar estilos desde JavaScript. Usar classList.add() te permite hacerlo de manera precisa y sin sobrescribir las clases ya existentes.

element.classList.add("clase1", "clase2", ...);

Este método agrega una o más clases al elemento. Si la clase ya está presente, no se duplicará. Es ideal para estados como "activo", "error", "seleccionado", etc.

boton.classList.add("activo");
boton.classList.add("resaltado", "grande");

Agregar múltiples clases en una sola llamada mejora el rendimiento y hace el código más legible.

Eliminar clases con classList.remove()

Cuando un estado visual ya no es necesario o quieres revertir un estilo aplicado por una clase, classList.remove() es la herramienta adecuada. Permite eliminar una o más clases específicas sin afectar otras que puedan estar presentes.

element.classList.remove("clase1", "clase2", ...);

Puedes pasar una o varias clases. Si alguna no existe, simplemente se ignora sin lanzar error.

caja.classList.remove("rojo");
caja.classList.remove("sombra", "resaltado");

Esta seguridad (no lanzar errores) hace que el método sea confiable incluso si no conoces con certeza el estado actual de las clases.

Alternar clases con classList.toggle()

En muchos casos no necesitamos solo agregar o quitar una clase, sino alternar su presencia según una acción del usuario. Eso es precisamente lo que hace classList.toggle(): añade una clase si no está y la elimina si ya existe. Es especialmente útil en patrones de diseño como menús desplegables, paneles colapsables o pestañas interactivas.

element.classList.toggle("clase");
element.classList.toggle("clase", true);  // fuerza agregar
element.classList.toggle("clase", false); // fuerza eliminar

Este método agrega una clase si no está presente o la elimina si ya lo está. El segundo argumento (opcional) permite forzar el resultado.

menu.classList.toggle("abierto");
menu.classList.toggle("abierto", true);  // fuerza visible
menu.classList.toggle("abierto", false); // fuerza oculto

toggle() es muy útil para elementos tipo “acordeón”, menús desplegables o switches visuales, donde se alterna entre estados como "activo" y "inactivo".

Verificar clases con classList.contains()

Antes de modificar un estado visual es frecuente que queramos saber si una clase ya está aplicada. classList.contains() permite hacer exactamente eso: verificar si una clase existe en el elemento, devolviendo un valor booleano.

element.classList.contains("clase");

Devuelve true si el elemento tiene la clase especificada, o false si no.

if (panel.classList.contains("visible")) {
  console.log("El panel está activo");
}

Este método es ideal para validar condiciones visuales antes de aplicar cambios adicionales en el DOM.

Comparación con className

Aunque también puedes manipular clases con element.className, este devuelve una cadena que representa todas las clases aplicadas al elemento lo que puede provocar sobrescritura accidental si no tienes cuidado.

element.className = "nueva-clase"; // ❌ elimina todas las anteriores

Ventajas clave de classList

✔ No sobrescribe otras clases
✔ Sintaxis limpia, segura y fácil de entender
✔ Compatible con múltiples clases simultáneamente
✔ Soporta alternancia de clases de forma sencilla
✔ Mantiene la separación entre lógica (JS) y estilo (CSS)

Conclusión

classList es la herramienta moderna y segura para manipular clases CSS con JavaScript. Gracias a sus métodos específicos puedes modificar la apariencia de los elementos del DOM sin tocar los estilos directamente, evitando errores y manteniendo un código limpio y modular.

En este artículo aprendiste a:

• Agregar, eliminar y alternar clases con .add(), .remove() y .toggle()
• Verificar clases aplicadas con .contains()
• Evitar errores comunes al usar .className
• Aplicar buenas prácticas con clases CSS dinámicas

En el siguiente artículo analizaremos className: cómo funciona internamente, en qué casos es útil, y cuándo deberías evitarlo en favor de classList.