Stylovanie pomocou CSS tried v JavaScripte

V predchádzajúcej lekcii sme sa naučili meniť CSS štýly elementov zmenou atribútu style. Najčastejšie to nie je veľmi dobrý nápad. Problém je, že ak roztrúsite CSS štýly do JavaScript kódu, v budúcnosti bude problematické zmeniť dizajn stránky, pretože bude potrebné hľadať v JavaScript kóde štýly, ktoré sú v ňom zakódované.

Pre ľahšiu údržbu je vhodnejšie pridať alebo odobrať elementu CSS triedy, čím ich vhodne nastylujeme.

Pozrime sa na príklad. Predpokladajme, že máme niekoľko odsekov:

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

Urobme tak, aby po kliknutí na ľubovoľný odsek sa tento odsek zafarbil do nejakej farby, napríklad do zelenej. Preto v CSS súbore vytvorme špeciálnu triedu na zafarbenie odsekov:

.colored {
	color: green;
}

Výhoda použitia triedy spočíva v tom, že teraz je ľahké zmeniť požadovanú farbu - stačí jednoducho vykonať zmenu v CSS súbore, bez toho aby sme museli upravovať JavaScript kód. Je to obzvlášť výhodné v prípade, keď JavaScript kód píšete vy, a v budúcnosti ho bude stylovať niekto iný (možno menej kvalifikovaná osoba, ktorá vie pracovať len s CSS).

Takže teraz, po zavedení triedy, po kliknutí na ľubovoľný odsek je možné zmeniť jeho farbu jednoduchým pridaním našej triedy:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // pridáme odseku triedu
	});
}

Vysvetlite, prečo som pre názov triedy zvolil slovo colored, a nie slovo green, ktoré explicitne označuje požadovanú farbu.

Daný odsek. Dané tlačidlá 'preškrtnúť', 'zvýrazniť tučne', 'zmeniť na červenú'. Nech po stlačení každého tlačidla sa daná akcia vykoná s odsekom (napríklad zmení sa na červený).