Cómo cambiar la clase de un elemento en JavaScript: mejores prácticas 2025

Cómo cambiar la clase de un elemento en JavaScript: de principiante a profesional en 2025

¿Alguna vez has querido que un botón en un sitio web cambie de color al hacer clic, o que un menú se deslice suavemente? Todo esto es la magia de cambiar las clases. La pregunta «How can I change an element's class with JavaScript?» es una de las más populares en Stack Overflow (decenas de miles de visitas). Y con razón: sin esta habilidad es difícil imaginar el desarrollo web moderno.

En 2025, los navegadores se han vuelto aún más inteligentes, pero la herramienta básica sigue siendo la misma: classList. En este artículo, analizaremos todas las formas de cambiar la clase de un elemento en JavaScript: desde lo clásico hasta las técnicas modernas. Aprenderás a no pisar el rastrillo y a escribir código del que no te avergüences en una entrevista.

¿Por qué es importante cambiar la clase?

Imagina que estás construyendo una casa con bloques. Cada bloque es un elemento HTML, y las clases son etiquetas que dicen: «soy rojo», «soy animado», «estoy oculto». Cuando el usuario presiona un botón, simplemente cambias la etiqueta y el elemento cobra vida. Sin cambiar las clases, tendrías que redibujar toda la interfaz, lo cual es lento y triste.

En 2025, cambiar la clase de un elemento en JavaScript es una operación básica que se utiliza en 9 de cada 10 sitios web interactivos. Desde ventanas modales hasta el modo oscuro, todo se basa en las clases.

JavaScript puro: classList — tu herramienta principal

Si todavía usas className y concatenación de cadenas, detente. En 2025 existe classList. Es una API integrada que funciona en todos los navegadores modernos (sí, incluso en Safari).

Así es como se ve:

// Obtenemos el elementoconst button = document.querySelector('.my-button');

// Añadimos una clasebutton.classList.add('active');

// Eliminamos una clasebutton.classList.remove('active');

// Alternamos una clasebutton.classList.toggle('active');

// Verificamos si existe una claseif (button.classList.contains('active')) {  console.log('¡El botón está activo!');}

Este código es la base que todo el mundo debe conocer. Pero hay matices que convierten un buen código en excelente.

Clases múltiples: añadir y eliminar de una vez

¿Quieres añadir varias clases a la vez? Fácil:

element.classList.add('visible', 'animated', 'highlight');

Lo mismo con la eliminación:

element.classList.remove('hidden', 'fade-out');

Esto funciona incluso en Internet Explorer 11 (si es que todavía das soporte a navegadores antiguos). En 2025, esto es un estándar.

Reemplazar una clase: cambiar una por otra

A veces es necesario reemplazar una clase por otra. Por ejemplo, cambiar un icono de «sol» a «luna». Para esto existe el método replace:

element.classList.replace('icon-sun', 'icon-moon');

Si la clase icon-sun no existe, no ocurre nada, no se produce ningún error. Es seguro y legible.

Alternancia condicional: toggle con bandera booleana

El método toggle puede aceptar un segundo argumento: un valor booleano. Si es true, la clase se añadirá; si es false, se eliminará. Esto es útil cuando quieres sincronizar una clase con un estado:

const isDarkMode = true;element.classList.toggle('dark', isDarkMode); // añadirá 'dark'

const isLoggedIn = false;element.classList.toggle('logged-in', isLoggedIn); // eliminará 'logged-in'

Esto es mucho más limpio que escribir un if-else.

¿Y qué hay de className? ¿Cuándo se necesita?

El viejo y querido className sigue vivo, pero su momento ha pasado. Reemplaza todas las clases de una vez:

element.className = 'new-class another-class';

El problema: si el elemento ya tenía clases, se borrarán. En 2025, className se usa solo en dos casos:

• Cuando se necesita reemplazar completamente