Oblikovanje s CSS razredi v JavaScriptu

V prejšnji lekciji smo se naučili spreminjati CSS stile elementov prek spreminjanja atributa style. Pogosto to ni zelo dobra ideja. Bistvo je v tem, da če razporedimo CSS stile po JavaScript kodi, bo v prihodnosti problematično spremeniti dizajn spletne strani, saj bo treba brskati po JavaScript kodi in iskati stile, ki so vanjo vgrajeni.

Za nadaljnje vzdrževanje bo bolj priročno dodajati ali odstranjevati CSS razrede elementom, s čimer jih oblikujemo na želen način.

Poglejmo si na primeru. Recimo, da imamo več odstavkov:

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

Naredimo tako, da ob kliku na katerikoli odstavek, ta odstavek pobarva v kakšno barvo, na primer zeleno. Za to v CSS datoteki naredimo poseben razred za barvanje odstavkov:

.colored {
	color: green;
}

Prednost uporabe razreda je v tem, da je zdaj enostavno zamenjati želeno barvo - za to bo treba samo narediti spremembo v CSS datoteki, brez spreminjanja JavaScript kode. Še posebej priročno bo to v primeru, če JavaScript kodo pišete vi, v prihodnosti pa jo bo oblikoval kdo drug (morda manj usposobljena oseba, ki zna delati samo s CSS).

Torej, zdaj, po uvedbi razreda, ob kliku na katerikoli odstavek lahko spremenimo njegovo barvo, preprosto tako, da mu dodamo naš razred:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // dodamo razred odstavku
	});
}

Razložite, zakaj sem izbral za ime razreda besedo colored, namesto besede green, ki izrecno nakazuje želeno barvo.

Dan je odstavek. Dane so gumbi 'prečrtaj', 'podebljaj', 'obarvaj rdeče'. Naj ob pritisku na vsak gumb z danim dejanjem to dejanje izvede na odstavku (postane rdeč, na primer).