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:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', function() {
this.classList.toggle('colored');
});
}
Pas de vorige opdracht zo aan dat een tweede klik op de knop de actie van die knop ongedaan maakt.