Gestaltung mit CSS-Klassen in JavaScript

In der vorherigen Lektion haben wir gelernt, wie man CSS-Stile von Elementen ändert, indem man das style-Attribut ändert. Meistens ist das keine sehr gute Idee. Der Grund dafür ist, dass es problematisch wird, das Design der Website später zu ändern, wenn man CSS-Stile im JavaScript-Code verteilt, da man dann den JavaScript-Code durchforsten muss, um die dort eingebetteten Stile zu finden.

Für die spätere Wartung ist es bequemer, CSS-Klassen hinzuzufügen oder zu entfernen, um sie auf die gewünschte Weise zu gestalten.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben mehrere Absätze:

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

Lassen Sie uns bewirken, dass beim Klicken auf einen beliebigen Absatz dieser in einer beliebigen Farbe eingefärbt wird, zum Beispiel in Grün. Dazu erstellen wir in der CSS-Datei eine spezielle Klasse zum Einfärben der Absätze:

.colored {
	color: green;
}

Der Vorteil der Verwendung einer Klasse liegt darin, dass man nun die gewünschte Farbe leicht ändern kann - dazu muss man einfach nur die CSS-Datei ändern, ohne den JavaScript-Code anfassen zu müssen. Besonders praktisch ist das, wenn Sie den JavaScript-Code schreiben und ihn später jemand anderes gestaltet (möglicherweise eine weniger qualifizierte Person, die nur mit CSS umgehen kann).

Nachdem die Klasse eingeführt wurde, kann man nun beim Klicken auf einen beliebigen Absatz dessen Farbe ändern, indem man einfach unsere Klasse hinzufügt:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // fügt dem Absatz die Klasse hinzu
	});
}

Erklären Sie, warum ich für den Klassennamen das Wort colored gewählt habe, und nicht das Wort green, das eindeutig auf die von uns gewünschte Farbe hinweist.

Gegeben ist ein Absatz. Gegeben sind die Schaltflächen 'durchstreichen', 'fett machen', 'rot machen'. Bei jedem Klick auf eine Schaltfläche soll die angegebene Aktion mit dem Absatz durchgeführt werden (z. B. rot werden).