Stilizarea cu clase în JavaScript

A stiliza elementele prin atributul style uneori este convenabil, dar de cele mai multe ori - nu este cea mai bună idee. Problema este că stilurile vor fi împrăștiate în fișierul JavaScript și va fi dificil să le modifici. Este mult mai convenabil să stabilești stilurile în fișierele CSS, astfel încât să le poți modifica cu ușurință, fără să cauți în codul JavaScript.

Să presupunem, de exemplu, că avem un element care afișează un anumit mesaj. Mesajul poate fi "bun" și să fie afișat în culoare verde și "rău" și să fie afișat în culoare roșie. Cea mai bună soluție în acest caz ar fi să creezi pentru aceasta clasele CSS corespunzătoare:

.success {
	color: green;
}
.error {
	color: red;
}

Acum, la afișarea mesajului "bun" îi vom da elementului clasa "bună":

elem.textContent = 'good';
elem.classList.add('success');

Iar la afișarea mesajului "rău" îi vom da elementului clasa "rea":

elem.textContent = 'bad';
elem.classList.add('error');

Sunt date paragrafe cu numere. Parcurgeți aceste paragrafe cu bucla și paragrafele care conțin numere pare, colorați-le în roșu, iar pe cele care conțin numere impare - în verde.