Estilização usando classes CSS em JavaScript

Na lição anterior, aprendemos a alterar os estilos CSS dos elementos modificando o atributo style. Na maioria das vezes, isso não é uma boa ideia. O problema é que, se espalharmos os estilos CSS pelo código JavaScript, será problemático alterar o design do site posteriormente, pois será necessário mexer no código JavaScript para encontrar os estilos fixados nele.

Para uma manutenção futura mais conveniente, é melhor adicionar ou remover classes CSS dos elementos, estilizando-os da maneira desejada.

Vamos ver um exemplo. Suponha que temos vários parágrafos:

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

Vamos fazer com que, ao clicar em qualquer parágrafo, esse parágrafo seja colorido com alguma cor, por exemplo, verde. Para isso, no arquivo CSS, vamos criar uma classe especial para colorir os parágrafos:

.colored {
	color: green;
}

A vantagem de usar uma classe é que agora será fácil alterar a cor desejada - para isso, basta fazer a alteração no arquivo CSS, sem mexer no código JavaScript. Isso será especialmente conveniente no caso em que você escreve o código JavaScript, e posteriormente quem vai estilizá-lo é outra pessoa (possivelmente uma pessoa menos qualificada, que sabe trabalhar apenas com CSS).

Então, agora, após a criação da classe, ao clicar em qualquer parágrafo, podemos alterar sua cor simplesmente adicionando nossa classe a ele:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // adiciona a classe ao parágrafo
	});
}

Explique por que eu escolhi a palavra colored para o nome da classe, e não a palavra green, que indica explicitamente a cor que desejamos.

Dado um parágrafo. Dados os botões 'riscar', 'deixar em negrito', 'deixar vermelho'. Faça com que, ao clicar em cada botão, a ação especificada aconteça com o parágrafo (tornar-se vermelho, por exemplo).