Como desarrollador web, a menudo debe agregar, eliminar y alternar clases de CSS en función de las interacciones del usuario con los elementos de la página web. Si ya había usado jQuery en el pasado, probablemente esté familiarizado con el addClass() , removeClass() y toggleClass() métodos.
En JavaScript moderno, no tiene sentido cargar la biblioteca jQuery completa solo para realizar algunas manipulaciones simples de DOM. En este artículo, aprenderás a agregar, eliminar y alternar clases de CSS en JavaScript estándar sin jQuery.
Usando className Propiedad
La forma más sencilla de obtener y establecer clases de CSS en JavaScript es mediante el className propiedad. Se refiere al valor del elemento HTML class atributo.
Digamos que tenemos el siguiente elemento HTML:
<div class="pizza">🍕</div>
El siguiente ejemplo muestra cómo agregar una nueva clase CSS o reemplazar todas las clases CSS existentes del <div> anterior elemento:
const pizza = document.querySelector('.pizza');
// print existing classes
console.log(pizza.className); // pizza
// add new `.spicy` class
pizza.className += 'spicy';
// replace all existing classes
pizza.className = 'hot spicy pizza';
Desde class es una palabra reservada en JavaScript, el nombre className se utiliza para esta propiedad en lugar de class . Esta propiedad es compatible con todos los navegadores modernos y antiguos, incluido Internet Explorer.
Usando classList Propiedad
Incluso hay una mejor manera de manipular las clases CSS en JavaScript, gracias al classList propiedad. Es un solo lectura propiedad que devuelve un en vivo Colección DOMTokenList de todas las clases aplicadas al elemento.
El classList La propiedad funciona en todos los navegadores modernos e IE10 y superior.
Puedes usar el classList propiedad para agregar, eliminar y alternar fácilmente las clases CSS de un elemento en JavaScript estándar.
Digamos que tenemos un elemento como el siguiente:
<div class="hot spicy pizza">
🍕
</div>
Tomemos una referencia al <div> anterior e imprima las clases existentes en la consola:
// grab element reference
const pizza = document.querySelector('.pizza');
// get all existing classes
console.log(pizza.classList);
// ["hot", "spicy", "pizza", value: "hot spicy pizza"]
// get first class name
console.log(pizza.classList[0]); // hot
// get total number of classes
console.log(pizza.classList.length); // 3
Veamos ahora los métodos populares del DOMTokenList colección, devuelta por el classList propiedad. Usaremos estos métodos para administrar y actualizar las clases CSS para un elemento HTML.
item() Método
El item() método devuelve la clase en la colección por su índice, o undefined si el índice es mayor o igual que el length de la lista propiedad:
console.log(pizza.classList.item(1)); // spicy
add() Método
El add() agrega una o más clases al elemento HTML:
pizza.classList.add('sauce', 'cheese', 'tomato');
Ahora, el elemento se ve a continuación:
<div class="hot spicy pizza sauce cheese tomato">
🍕
</div>
Si intenta agregar una clase que ya existe, el add() el método ignorará eso. Para ver cómo funciona, agreguemos más cheese a la pizza:
pizza.classList.add('cheese');
Aquí está el elemento ahora:
<div class="hot spicy pizza cheese tomato">
🍕
</div>
contains() Método
El contains() método devuelve true si el elemento contiene la clase dada, de lo contrario false :
console.log(pizza.classList.contains('cheese')); // true
console.log(pizza.classList.contains('yogurt')); // false
remove() Método
El remove() El método se utiliza para eliminar una o más clases del elemento:
pizza.classList.remove('sauce', 'potato');
Si intenta eliminar una clase que no existe, como hicimos en el ejemplo anterior, no habrá ningún error. JavaScript simplemente lo ignorará.
toggle() Método
toggle() es un método interesante. Elimina la clase si ya existe, de lo contrario, la agrega a la colección.
Sin este método, debe manualmente verificar si la clase existe usando contain() antes de activarlo o desactivarlo:
// manual toggle
if (pizza.classList.contains('olive')) {
pizza.classList.remove('olive');
} else {
pizza.classList.add('olive');
}
Con el toggle() método, simplemente pasa el nombre de la clase que desea alternar:
pizza.classList.toggle('olive');
El toggle() método devuelve true si se agregó la clase, y false si fue eliminado:
const status = pizza.classList.toggle('olive');
console.log(status); // true --> class was added
También puede pasar un segundo parámetro booleano al toggle() método para indicar si agregar la clase o eliminarla. Esto convertirá a toggle() en una operación de una sola vía. Si el segundo argumento se evalúa como false , entonces la clase solo se eliminará, pero no se agregará. Si se evalúa como true , entonces la clase solo se agregará, pero no se eliminará.
Aquí hay un ejemplo:
const status = pizza.classList.toggle('hot', false);
console.log(status); // false --> class was removed
replace() Método
El replace() El método se puede usar para reemplazar una clase CSS con otra clase:
pizza.classList.replace('spicy', 'olive');
Este método devuelve true si la clase de destino se reemplaza correctamente con la nueva clase; de lo contrario, false .
forEach() Método
El DOMTokenList La colección también admite el método forEach() para iterar sobre todas las clases:
// iterate over all classes
pizza.classList.forEach((item, index) => {
console.log(item);
});
Conclusión
¡Eso es todo amigos! En este artículo, analizamos dos propiedades importantes (className &classList ) para manipular clases CSS en JavaScript.
El className propiedad presenta el class atributo del elemento y es compatible con todos los navegadores, incluido Internet Explorer. Se puede usar para agregar una nueva clase o reemplazar las clases existentes.
Por otro lado, el classList propiedad devuelve un en vivo DOMTokenList colección de todas las clases aplicadas a un elemento DOM. Se puede usar para agregar, eliminar, alternar e iterar fácilmente a través de todas las clases.
Leer a continuación: Ocultar y mostrar elementos DOM usando una clase CSS en JavaScript