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:

<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:

.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ę:

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

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

Wyjaśnij, dlaczego wybrałem dla nazwy klasy słowo colored, a nie słowo green, wyraźnie wskazujące na pożądany przez nas kolor.

Dany jest akapit. Dane są przyciski 'przekreślić', 'pogrubić', 'uczynić czerwonym'. Niech po naciśnięciu każdego przycisku dane działanie zostanie wykonane na akapicie (stanie się czerwonym, na przykład).