Stilizarea cu ajutorul claselor CSS în JavaScript

În lecția precedentă am învățat cum să schimbăm stilurile CSS ale elementelor prin modificarea atributului style. De cele mai multe ori, aceasta nu este o idee foarte bună. Motivul este că, dacă împrăștiam stilurile CSS în codul JavaScript, ulterior va fi problematic să schimbăm designul site-ului, deoarece va trebui să căutăm în codul JavaScript pentru a găsi stilurile incluse acolo.

Pentru întreținerea ulterioară, va fi mai convenabil să adăugăm sau să eliminăm clase CSS elementului, stilizându-le astfel în modul dorit.

Să ne uităm la un exemplu. Să presupunem că avem câteva paragrafe:

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

Să facem astfel încât la click pe orice paragraf, acel paragraf să se coloreze într-o anumită culoare, de exemplu, verde. Pentru aceasta, în fișierul CSS să creăm o clasă specială pentru colorarea paragrafelor:

.colored {
	color: green;
}

Avantajul utilizării clasei este că acum se poate schimba ușor culoarea dorită - pentru aceasta va trebui doar să se facă modificarea în fișierul CSS, fără a modifica codul JavaScript. Acest lucru va fi deosebit de convenabil în cazul în care codul JavaScript îl scrieți dumneavoastră, iar ulterior îl va stiliza altcineva (posibil o persoană mai puțin calificată, care știe să lucreze doar cu CSS).

Deci, acum, după introducerea clasei, la click pe orice paragraf i se poate schimba culoarea, pur și simplu adăugându-i clasa noastră:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // adăugăm clasa paragrafului
	});
}

Explicați de ce am ales pentru denumirea clasei cuvântul colored, și nu cuvântul green, care indică în mod explicit culoarea dorită de noi.

Este dat un paragraf. Sunt date butoanele 'tăiat', 'faceți aldine', 'faceți roșu'. La apăsarea fiecărui buton, acțiunea specificată să se aplice paragrafului (să devină roșu, de exemplu).