Stilizacija pomoću CSS klasa u JavaScriptu

U prethodnoj lekciji naučili smo kako da menjamo CSS stilove elemenata kroz promenu atributa style. To najčešće nije baš dobra ideja. Problem je u tome što, ako razbacamo CSS stilove po JavaScript kodu, kasnije će biti problematično promeniti dizajn sajta, jer ćemo morati da kopamo po JavaScript kodu tražeći tamo ugradjene stilove.

Za dalju podršku, praktičnije će biti dodavati ili uklanjati elementu CSS klase, i na taj način ih stilizovati na željeni način.

Pogledajmo na primeru. Neka imamo nekoliko paragrafa:

<p>tekst1</p>
<p>tekst2</p>
<p>tekst3</p>

Hajde da napravimo da na klik na bilo koji paragraf, taj paragraf dobije neku boju, na primer, zelenu. Za to u CSS fajlu napravićemo posebnu klasu za bojenje paragrafa:

.colored {
	color: green;
}

Prednost korišćenja klase je u tome, što sada lako možemo promeniti željenu boju – za to će biti dovoljno samo uneti izmenu u CSS fajl, bez kopanja po JavaScript kodu. Posebno je zgodno u slučaju da JavaScript kod pišete vi, a kasnije će ga stilizovati neko drugi (možda manje kvalifikovana osoba, koja ume da radi samo sa CSS).

Dakle, sada, nakon uvođenja klase, klikom na bilo koji paragraf možemo promeniti njegovu boju, jednostavno dodajući mu našu klasu:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // dodajemo paragrafu klasu
	});
}

Objasnite zašto sam za naziv klase izabrao reč colored, a ne reč green, koja eksplicitno ukazuje na željeru boju.

Dat je paragraf. Date su dugmad 'precrtati', 'podebljati', 'učiniti crvenim'. Neka pri pritisku na svako dugme zadato dešavanje bude izvršeno nad paragrafom (postane crven, na primer).