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()
Eliminar
elemento.classList.remove('claseExistente');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.