Styling con classi CSS in JavaScript

Nella lezione precedente abbiamo imparato a cambiare gli stili CSS degli elementi modificando l'attributo style. Spesso questa non è una buona idea. Il fatto è che, se si spargono gli stili CSS nel codice JavaScript, in futuro sarà problematico cambiare il design del sito, poiché sarà necessario modificare il codice JavaScript alla ricerca degli stili inseriti lì.

Per una manutenzione futura più conveniente, è meglio aggiungere o rimuovere classi CSS agli elementi, stilizzandoli nel modo desiderato.

Vediamo un esempio. Supponiamo di avere diversi paragrafi:

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

Facciamo in modo che cliccando su qualsiasi paragrafo, questo si colori di un qualche colore, ad esempio verde. Per fare ciò, nel file CSS creiamo una classe speciale per colorare i paragrafi:

.colored {
	color: green;
}

Il vantaggio dell'uso della classe è che ora sarà facile cambiare il colore desiderato - per farlo basterà apportare una modifica al file CSS, senza modificare il codice JavaScript. Questo sarà particolarmente conveniente nel caso in cui il codice JavaScript lo scriviate voi, e in seguito a stilizzarlo sarà qualcun altro (forse una persona meno qualificata, che sa lavorare solo con CSS).

Quindi, ora, dopo aver introdotto la classe, al click su qualsiasi paragrafo è possibile cambiarne il colore, semplicemente aggiungendo la nostra classe:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // aggiungiamo la classe al paragrafo
	});
}

Spiegate perché ho scelto per il nome della classe la parola colored, e non la parola green, che indica chiaramente il colore da noi desiderato.

Dato un paragrafo. Date i pulsanti 'barrato', 'grassetto', 'rosso'. Fate in modo che alla pressione di ogni pulsante l'azione indicata avvenga sul paragrafo (diventi rosso, ad esempio).