En este artículo, vamos a explorar la forma de manipular clases CSS utilizando la API classList de Javascript. Esta característica, que está disponible en todos los navegadores modernos, nos permite realizar cambios dinámicos en las clases de los elementos HTML de una manera sencilla y eficiente.
¿Qué es la API classList de Javascript?
La API classList de Javascript es una interfaz que permite realizar operaciones en las clases CSS de un elemento HTML de una manera más fácil y segura. Anteriormente, para añadir, eliminar o modificar clases CSS, teníamos que utilizar la propiedad className, que requería manipular y actualizar manualmente la cadena de texto de las clases.
La API classList nos ofrece varios métodos para realizar estas operaciones de forma más intuitiva:
- add(className): añade una clase al elemento.
- remove(className): elimina una clase del elemento.
- toggle(className): añade la clase si no está presente, o la elimina si está presente.
- contains(className): devuelve true si el elemento tiene la clase especificada, o false en caso contrario.
Manipulando clases CSS con la API classList
Para utilizar la API classList, primero debemos seleccionar el elemento HTML al que queremos manipular las clases. Esto puede hacerse utilizando cualquiera de las funciones de selección de Javascript, como document.getElementById o document.querySelector.
Una vez que tenemos seleccionado el elemento, podemos utilizar los métodos de la API classList para realizar las manipulaciones necesarias. Por ejemplo, si queremos añadir una clase llamada "destacado" al elemento, podemos hacerlo de la siguiente manera:
const elemento = document.getElementById('miElemento');
elemento.classList.add('destacado');
Del mismo modo, si queremos eliminar la clase "destacado", podemos utilizar el método remove:
elemento.classList.remove('destacado');
También podemos utilizar el método toggle para alternar entre la adición y eliminación de una clase:
elemento.classList.toggle('destacado');
Además, podemos comprobar si un elemento tiene una clase específica utilizando el método contains:
if (elemento.classList.contains('destacado')) {
console.log('El elemento está destacado');
} else {
console.log('El elemento no está destacado');
}
La API classList en acción
Veamos ahora un ejemplo práctico de cómo podemos utilizar la API classList para crear una funcionalidad interactiva. Supongamos que tenemos un botón que, al hacer clic, cambia el color de fondo de un elemento:
Soy un elemento
En este ejemplo, hemos añadido una clase "resaltado" al elemento cuando se hace clic en el botón, y la hemos eliminado si ya estaba presente. Esto nos permite alternar fácilmente el resaltado del elemento cada vez que se hace clic en el botón.
Conclusión
La API classList de Javascript es una herramienta poderosa que nos permite manipular clases CSS de forma sencilla y eficiente. Con sus métodos add, remove, toggle y contains, podemos realizar todos los cambios de clases que necesitemos en nuestros elementos HTML de una manera más segura y comprensible.
Espero que este artículo te haya resultado útil para comprender cómo manipular clases CSS con la API classList de Javascript. Si tienes alguna pregunta o comentario, no dudes en dejarlo abajo. ¡Gracias por leer!
Preguntas frecuentes
¿Qué navegadores son compatibles con la API classList de Javascript?
La API classList de Javascript es compatible con todos los navegadores modernos, incluyendo Chrome, Firefox, Safari, Edge e Internet Explorer 10 y versiones posteriores.
¿Puedo utilizar la API classList para modificar múltiples clases a la vez?
Sí, la API classList permite añadir o eliminar múltiples clases a la vez separándolas por espacios en los argumentos de los métodos add y remove. Por ejemplo, puedes utilizar elemento.classList.add('clase1 clase2 clase3'); para añadir tres clases a un elemento al mismo tiempo.
¿Existe alguna limitación en la cantidad de clases que puedo añadir o eliminar con la API classList?
No, no hay ninguna limitación en la cantidad de clases que puedes utilizar con la API classList. Puedes añadir o eliminar tantas clases como necesites en un elemento HTML.
¿La modificación de clases con la API classList afecta a otros estilos CSS aplicados al elemento?
No, la modificación de clases con la API classList no afecta a otros estilos CSS aplicados al elemento, a menos que esos estilos estén directamente relacionados con las clases que se añaden o eliminan. Por lo tanto, puedes hacer cambios en las clases sin preocuparte por afectar otros estilos en tu página.
Spanish 
English