Styling met CSS klassen in JavaScript

In de vorige les hebben we geleerd hoe we CSS stijlen van elementen kunnen veranderen door het style attribuut aan te passen. Meestal is dit niet een erg goed idee. Het punt is dat, als je CSS stijlen verspreidt over JavaScript code, het in de toekomst problematisch zal zijn om het ontwerp van de website te veranderen, omdat je dan in de JavaScript code moet zoeken naar de daar ingebakken stijlen.

Het is handiger voor toekomstig onderhoud om CSS klassen aan een element toe te voegen of te verwijderen, en ze op die manier op de gewenste manier te stylen.

Laten we een voorbeeld bekijken. Stel we hebben een paar alinea's:

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

Laten we ervoor zorgen dat bij een klik op een willekeurige alinea, deze alinea in een bepaalde kleur wordt gekleurd, bijvoorbeeld groen. Hiervoor maken we in het CSS bestand een speciale klasse voor het kleuren van alinea's:

.colored {
	color: green;
}

Het voordeel van het gebruik van een klasse is dat het nu gemakkelijk zal zijn om de gewenste kleur te veranderen - hiervoor hoef je alleen maar een wijziging aan te brengen in het CSS bestand, zonder in de JavaScript code te hoeven rommelen. Dit is vooral handig in het geval dat jij de JavaScript code schrijft, en iemand anders het later zal stylen (misschien een minder gekwalificeerd persoon, die alleen met CSS kan werken).

Dus, na het introduceren van de klasse, kan bij een klik op een willekeurige alinea de kleur worden veranderd door gewoon onze klasse toe te voegen:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // voeg de klasse toe aan de alinea
	});
}

Leg uit waarom ik voor de klassenaam het woord colored heb gekozen, en niet het woord green, dat duidelijk verwijst naar de gewenste kleur.

Gegeven een alinea. Gegeven knoppen 'doorhalen', 'vet maken', 'rood maken'. Laat bij het klikken op elke knop de opgegeven actie met de alinea gebeuren (hij wordt bijvoorbeeld rood).