Cuando trabajas con JavaScript para manipular el DOM, a menudo necesitas modificar las clases de los elementos HTML. classList es una propiedad que te permite interactuar con las clases de un elemento de una manera fácil y potente. En este artículo, exploraremos qué es classList y algunas de sus diferentes funcionalidades. .
¿Qué es ClassList?
classList es una propiedad de solo lectura que devuelve una lista de las clases de un elemento como un objeto DOMTokenList. Te permite agregar, eliminar y alternar clases de un elemento de manera eficiente.
1. Agregar una clase
Puedes agregar una clase a un elemento utilizando el método add() de classList.
Agregar
const elemento = document.getElementById('miElemento');
elemento.classList.add('nuevaClase');
2. Eliminar una clase
Para eliminar una clase de un elemento, utiliza el método remove()
3. Alternar una clase
El método toggle() alterna la presencia de una clase en un elemento. Si la clase ya está presente, la quita; de lo contrario, la agrega.
4. Comprobar si una clase está presente
Comprobar
if (elemento.classList.contains('claseBuscada')) {
// La clase está presente
} else {
// La clase no está presente
}
5. Reemplazar una clase
El método replace() reemplaza una clase existente por otra.
Reemplazar
elemento.classList.replace('claseExistente', 'nuevaClase');
¡Contáctanos!
Si tienes preguntas, aclaraciones, sugerencias de temas o cualquier otra consulta, ¡no dudes en ponerte en contacto con nosotros! Por favor, completa el formulario de contacto disponible en este enlace, y estaremos encantados de ayudarte.