Stylování pomocí CSS tříd v JavaScriptu

V předchozí lekci jsme se naučili měnit CSS styly prvků prostřednictvím změny atributu style. Často to není příliš dobrý nápad. Problém je v tom, že pokud rozptýlíme CSS styly do JavaScriptového kódu, bude následně problematické změnit design webu, protože bude nutné prohledávat JavaScriptový kód a hledat v něm zakotvené styly.

Pro další údržbu bude pohodlnější přidávat nebo odebírat prvkům CSS třídy, čímž je stylujeme požadovaným způsobem.

Podívejme se na příklad. Předpokládejme, že máme několik odstavců:

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

Udělejme to, aby po kliknutí na libovolný odstavec byl tento odstavec obarven nějakou barvou, například zelenou. K tomu v CSS souboru vytvoříme speciální třídu pro barvení odstavců:

css.colored {
  color: green;
}

Výhoda použití třídy spočívá v tom, že nyní lze snadno změnit požadovanou barvu - stačí pouze provést změnu v CSS souboru, bez zásahu do JavaScriptového kódu. To bude obzvláště výhodné v případě, že JavaScriptový kód píšete vy, a následně ho bude stylovat někdo jiný (pravděpodobně méně kvalifikovaná osoba, která umí pracovat pouze s CSS).

Takže nyní, po zavedení třídy, po kliknutí na libovolný odstavec lze změnit jeho barvu jednoduše přidáním naší třídy:

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

for (let elem of elems) {
  elem.addEventListener('click', function() {
    this.classList.add('colored'); // přidáme odstavci třídu
  });
}