Styling med CSS-klasser i JavaScript

I den forrige lektion lærte vi at ændre CSS-stilarter på elementer ved at ændre attributten style. Som oftest er det ikke en særlig god idé. Grunden er, at hvis man spreder CSS-stilarter ud over JavaScript-koden, vil det i fremtiden være problematisk at ændre webstedets design, da man bliver nødt til at rode i JavaScript-koden for at finde de stilarter, der er indlejret der.

Mere bekvemt for fremtidig vedligeholdelse vil være at tilføje eller fjerne CSS-klasser fra et element, og derved style dem på den ønskede måde.

Lad os se på et eksempel. Antag, at vi har flere afsnit:

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

Lad os gøre det sådan, at når man klikker på et hvilket som helst afsnit, farves dette afsnit i en eller anden farve, for eksempel grøn. For at gøre dette, lad os i CSS-filen oprette en speciel klasse til at farve afsnit:

.colored {
	color: green;
}

Fordelen ved at bruge en klasse er, at man nu nemt kan ændre den ønskede farve - for at gøre dette skal man blot foretage ændringen i CSS-filen, uden at rode i JavaScript-koden. Dette vil være særlig bekvemt i det tilfælde, hvor du skriver JavaScript-koden, og den senere skal styles af en anden (muligvis en mindre kvalificeret person, som kun kan arbejde med CSS).

Så nu, efter indførelsen af klassen, kan man ved et klik på et hvilket som helst afsnit ændre dets farve, blot ved at tilføje vores klasse til det:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // tilføjer klassen til afsnittet
	});
}

Forklar, hvorfor jeg valgte ordet colored til klassenavnet, og ikke ordet green, som tydeligt indikerer den farve, vi ønsker.

Givet et afsnit. Givet knapperne 'gennemstrege', 'gør fed', 'gør rød'. Lad det sådan være, at ved tryk på hver knap sker den angivne handling med afsnittet (bliver rødt, for eksempel).