Estilización con clases CSS en JavaScript

En la lección anterior aprendimos a cambiar los estilos CSS de los elementos modificando el atributo style. La mayoría de las veces esta no es una muy buena idea. El problema es que, si distribuimos los estilos CSS por el código JavaScript, en el futuro será problemático cambiar el diseño del sitio, ya que habrá que revisar el código JavaScript en busca de los estilos incrustados allí.

Será más conveniente para el mantenimiento futuro añadir o quitar clases CSS al elemento, estilizándolos de la manera deseada.

Veamos un ejemplo. Supongamos que tenemos varios párrafos:

html<p>text1</p>
<p>text2</p>
<p>text3</p>

Hagamos que al hacer clic en cualquier párrafo, este se pinte de algún color, por ejemplo, verde. Para ello, en el archivo CSS creemos una clase especial para colorear los párrafos:

css.colored {
  color: green;
}

La ventaja de usar una clase es que ahora será fácil cambiar el color deseado: para ello solo habrá que hacer un cambio en el archivo CSS, sin tener que modificar el código JavaScript. Esto será especialmente conveniente en el caso de que el código JavaScript lo escribas tú, y en el futuro lo estilice otra persona (posiblemente una persona menos cualificada, que solo sepa trabajar con CSS).

Entonces, ahora, tras introducir la clase, al hacer clic en cualquier párrafo se puede cambiar su color, simplemente añadiéndole nuestra clase:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', function() {
    this.classList.add('colored'); // añadimos la clase al párrafo
  });
}