En el desarrollo web, la manipulación de clases CSS es una tarea común y necesaria para lograr la apariencia deseada en nuestros sitios. JavaScript nos ofrece una forma sencilla y poderosa de manipular estas clases mediante la API classList.
La API classList de JavaScript
La API classList es una interfaz que nos permite manipular las clases CSS de un elemento de forma más eficiente y legible en comparación con el uso del atributo class. Esta API proporciona métodos que facilitan la adición, eliminación y verificación de clases en un elemento.
Para acceder a la API classList de un elemento, utilizamos la propiedad classList. Por ejemplo:
const element = document.getElementById("mi-elemento");
const classList = element.classList;
Ahora que tenemos acceso a la API classList, podemos manipular las clases del elemento de varias maneras.
Añadir una clase a un elemento
Para agregar una clase a un elemento, utilizamos el método add de la API classList. Por ejemplo:
const element = document.getElementById("mi-elemento");
element.classList.add("clase-nueva");
Con esto, se agregará la clase "clase-nueva" al elemento, lo que permitirá aplicar los estilos correspondientes definidos en nuestra hoja de estilos CSS.
Eliminar una clase de un elemento
Si queremos eliminar una clase de un elemento, utilizamos el método remove de la API classList. Por ejemplo:
const element = document.getElementById("mi-elemento");
element.classList.remove("clase-a-eliminar");
Al llamar a este método, se eliminará la clase "clase-a-eliminar" del elemento, lo que revertirá los estilos asociados a dicha clase.
Verificar si un elemento tiene una clase
Si deseamos verificar si un elemento tiene una clase específica, podemos utilizar el método contains de la API classList. Este método devuelve un valor booleano indicando si el elemento tiene la clase especificada. Por ejemplo:
const element = document.getElementById("mi-elemento");
const tieneClase = element.classList.contains("clase-a-verificar");
if (tieneClase) {
console.log("El elemento tiene la clase");
} else {
console.log("El elemento no tiene la clase");
}
Esto puede ser útil para realizar acciones condicionales basadas en la presencia o ausencia de una clase en un elemento.
La manipulación de clases CSS mediante la API classList de JavaScript nos brinda una solución potente y eficiente para modificar la apariencia y el comportamiento visual de nuestros elementos en la web. Su uso resulta especialmente útil cuando necesitamos realizar cambios dinámicos en las clases de un elemento durante la ejecución de nuestro código.
Javascript en español
En NelkoDev, proporcionamos contenido educativo y recursos en español sobre JavaScript y otras tecnologías de programación. Si estás interesado en aprender más sobre JavaScript, te invitamos a explorar nuestro sitio web, donde encontrarás tutoriales, guías y ejemplos de código que te ayudarán a mejorar tus habilidades de programación.
No dudes en ponerte en contacto con nosotros si tienes alguna pregunta o si necesitas ayuda con tus proyectos. Estamos disponibles a través de nuestro formulario de contacto en https://nelkodev.com/contacto. Además, te invitamos a visitar nuestro portfolio de proyectos en https://nelkodev.com/portfolio para ver algunos de nuestros trabajos anteriores.
Preguntas frecuentes
¿Cuál es la diferencia entre utilizar la API classList y el atributo class?
La API classList proporciona métodos más intuitivos y eficientes para manipular las clases CSS de un elemento. Por otro lado, el atributo class es una cadena de texto que abarca todas las clases asignadas a un elemento en forma de lista separada por espacios.
¿Puedo agregar múltiples clases al mismo tiempo utilizando la API classList?
Sí, puedes agregar múltiples clases al mismo tiempo utilizando el método add de la API classList. Solo necesitas separar las clases con comas al pasarlas como argumento. Por ejemplo: element.classList.add("clase1", "clase2", "clase3").
¿Se admiten espacios en blanco en los nombres de las clases?
Si, se admiten espacios en blanco en los nombres de las clases. Sin embargo, es una buena práctica evitar utilizar espacios en blanco y en su lugar, utilizar guiones o camelCase para separar palabras en los nombres de las clases.
¿Puedo manipular clases de elementos que aún no existen en el DOM?
No, para manipular clases de elementos, estos deben existir en el DOM. Si estás agregando elementos de forma dinámica, debes asegurarte de que hayan sido agregados al DOM antes de manipular sus clases utilizando la API classList.
Espero que este artículo te haya ayudado a comprender cómo manipular las clases CSS en JavaScript utilizando la API classList. Si tienes alguna otra pregunta, no dudes en dejarla en los comentarios.
Spanish 
English