Ventaja de estilizar con clases CSS en JavaScript
Usar clases en lugar de cambiar los estilos directamente tiene otra ventaja. Con un ligero movimiento de la mano, puedes hacer que los estilos de los elementos se alternen.
Por ejemplo, puedes hacer que en el primer
clic en un párrafo, este se pinte de un color
específico, y en un segundo clic, regrese
a su color original. Para esto, solo necesitas
cambiar el método add por el método toggle:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', function() {
this.classList.toggle('colored');
});
}
Modifique la tarea anterior para que un segundo clic en el botón deshaga la acción de este botón.
