Zalety stylizacji za pomocą klas CSS w JavaScript

Używanie klas zamiast bezpośredniej zmiany stylów ma jeszcze jedną zaletę. Jednym prostym ruchem można sprawić, że style elementów będą się przełączać.

Na przykład, można osiągnąć, aby po pierwszym kliknięciu w akapit został on pokolorowany na określony kolor, a po ponownym kliknięciu - przywracał swojego pierwotnego koloru. Aby to zrobić, wystarczy zamienić metodę add na metodę toggle:

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

for (let elem of elems) {
  elem.addEventListener('click', function() {
    this.classList.toggle('colored');
  });
}