Voordeel van stijlen met CSS classes in JavaScript

Het gebruik van classes in plaats van het direct aanpassen van stijlen heeft nog een ander voordeel. Met een simpele handeling kun je ervoor zorgen dat de stijlen van elementen afwisselen.

Je kunt er bijvoorbeeld voor zorgen dat bij de eerste klik op een paragraaf deze in een bepaalde kleur wordt gekleurd, en bij een tweede klik - de oorspronkelijke kleur terugkrijgt. Hiervoor hoef je alleen maar de methode add te vervangen door de methode toggle:

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

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