En este artículo aprenderás a modificar las clases CSS con el objeto de JavaScript classList en tu proyecto de manipulación del DOM. El objeto classList te permite ajustar las clases CSS asignadas a un elemento HTML.
<!DOCTYPE html>
<html>
<head>
<title>Mon titre</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
.colorText {
color: purple;
}
.boldText {
font-weight: bold;
}
.bigText {
font-size: 35px;
}
</style>
</head>
<body>
<p id="myText">
Hello World!
</p>
</body>
</html>Vamos a modificar ahora tu texto con la propiedad classList y a aplicar tus clases CSS.
Usar los métodos .add() y .contains() de classList
Crea un archivo index.js, obtén una referencia a tu elemento de párrafo y llama al método classList.add():
index.js
const myText = document.getElementById('myText');
myText.classList.add('colorText');El método integrado classList.add() aplica una clase a tu elemento HTML. En este caso, el texto del párrafo pasará a mostrarse en morado.
También puedes comprobar si la clase CSS existe en tu elemento de párrafo con el método classList.contains(), que devuelve un booleano:
const myText = document.getElementById('myText');
console.log(myText.classList.contains('colorText')); // trueComo la clase CSS colorText existe en tu elemento de párrafo, la llamada devuelve true.
Usar los métodos .item() y .remove() de classList
En tu archivo index.js, añade más clases CSS a tu elemento de párrafo:
index.js
const myText = document.getElementById('myText');
myText.classList.add('boldText');
myText.classList.add('bigText');
console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];La propiedad classList guarda cada clase añadida en un array. Si muestras myText.classList en la consola, obtendrás un array con tus clases CSS.
Para comprobar el índice de cada clase CSS dentro del array, llama al método classList.item():
const myText = document.getElementById('myText');
myText.classList.item('boldText'); // 2Para eliminar una clase CSS, usa el método classList.remove():
const myText = document.getElementById('myText') ;
myText.classList.remove('bigText') ;
console.log(myText.classList) ; // ['colorText', 'boldText'] ;Una vez que muestres myText.classList en la consola, la clase CSS que has eliminado ya no aparece en el array y no se aplicará a tu elemento de párrafo.
Ahora que sabes añadir, comprobar y eliminar clases CSS, veamos cómo sacar más partido a otros métodos de classList.
Manejar el método .toggle() de classList
En lugar de llamar a classList.add() y a classList.remove() por separado, puedes usar el método classList.toggle():
Para ello, añade un escuchador de eventos a un botón en tu archivo index.js:
index.js
textButton.addEventListener('click', () => {
myText.classList.toggle('newFont');
});En cada clic, classList.toggle() añade la clase CSS si no existe en el array classList y devuelve true. Si la clase CSS existe, el método la elimina y devuelve false.
const anotherClass = myText.classList.toggle('newSize');
console.log(anotherClass); // true --> La clase se ha añadidoTambién puedes pasar un booleano como segundo argumento opcional al método classList.toggle(). Así se añadirá o se eliminará la clase CSS según el resultado de ese segundo argumento:
const bool = false;
let firstToggle = myText.classList.toggle('newSize', bool);
console.log(firstToggle);
// false, 'newFont' ya existe y se eliminará del array classList
let secondToggle = shadesEl.classList.toggle('newColor', !bool);
console.log(secondToggle);
// true, 'newColor' no existe y la clase se añadirá.El método classList.toggle() permite añadir y eliminar clases CSS, existan o no en tu array, con menos líneas de código.
Conclusión
La propiedad classList aporta más rendimiento y más funciones para modificar tus elementos HTML y sus clases CSS en JavaScript.
Para saber más, consulta el artículo sobre cómo modificar el DOM en JavaScript.
