Stylizacja za pomocą klas CSS w JavaScript

W poprzedniej lekcji nauczyliśmy się zmieniać style CSS elementów poprzez modyfikację atrybutu style. Najczęściej nie jest to najlepszy pomysł. Chodzi o to, że jeśli rozproszymy style CSS po kodzie JavaScript, w przyszłości problematyczne będzie zmienianie wyglądu strony, ponieważ trzeba będzie przekopywać się przez kod JavaScript w poszukiwaniu zapisanych tam stylów.

Wygodniej dla późniejszej konserwacji będzie dodawanie lub usuwanie elementowi klas CSS, tym samym stylizując je w pożądany sposób.

Spójrzmy na przykład. Załóżmy, że mamy kilka akapitów:

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

Zróbmy tak, aby po kliknięciu w dowolny akapit, ten akapit kolorował się na jakiś kolor, na przykład, zielony. W tym celu w pliku CSS utwórzmy specjalną klasę do kolorowania akapitów:

css.colored {
  color: green;
}

Zaleta użycia klasy polega na tym, że teraz łatwo będzie zmienić pożądany kolor - wystarczy po prostu wprowadzić zmianę w pliku CSS, nie grzebiąc w kodzie JavaScript. Szczególnie wygodne będzie to w przypadku, gdy kod JavaScript piszesz ty, a w dalszej kolejności stylizować go będzie ktoś inny (być może mniej wykwalifikowana osoba, umiejąca pracować tylko z CSS).

A zatem, teraz, po wprowadzeniu klasy, po kliknięciu w dowolny akapit można zmienić jego kolor, po prostu dodając mu naszą klasę:

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

for (let elem of elems) {
  elem.addEventListener('click', function() {
    this.classList.add('colored'); // dodajemy akapitowi klasę
  });
}