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:

html<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:

css.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:

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

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