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:

<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:

.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:

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

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

Explica por qué elegí para el nombre de la clase la palabra colored, y no la palabra green, que indica claramente el color que deseamos.

Dado un párrafo. Dados los botones 'tachar', 'poner en negrita', 'hacer rojo'. Que al pulsar cada botón la acción especificada le ocurra al párrafo (que se vuelva rojo, por ejemplo).