Stilsetting med CSS-klasser i JavaScript

I forrige leksjon lærte vi å endre CSS-stiler på elementer gjennom endring av style-attributten. Som oftest er dette ikke en veldig god idé. Grunnen er at hvis CSS-stiler spres utover JavaScript-koden, vil det i fremtiden være problematisk å endre nettstedets design, fordi man må rote i JavaScript-koden på jakt etter stilene som er skrevet inn der.

Mer praktisk for fremtidig vedlikehold vil være å legge til eller fjerne CSS-klasser fra et element, og dermed style dem på ønsket måte.

La oss se på et eksempel. La oss si at vi har flere avsnitt:

<p>tekst1</p>
<p>tekst2</p>
<p>tekst3</p>

La oss gjøre det slik at ved et klikk på et hvilket som helst avsnitt, farges dette avsnittet i en eller annen farge, for eksempel grønn. For dette, i CSS-filen, lage vi en spesiell klasse for å farge avsnittene:

.colored {
	color: green;
}

Fordelen med å bruke en klasse er at det nå enkelt vil være mulig å endre ønsket farge - for dette trenger man bare å gjøre endringen i CSS-filen, uten å rote i JavaScript-koden. Dette vil være spesielt praktisk i tilfellet der JavaScript-koden er skrevet av deg, og i fremtiden vil den bli stylt av noen andre (kanskje en mindre kvalifisert person, som kun kan jobb med CSS).

Så, nå, etter innføringen av klassen, ved et klikk på et hvilket som helst avsnitt, kan man endre dets farge, ganske enkelt ved å legge til klassen vår:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // legger til klassen i avsnittet
	});
}

Forklar hvorfor jeg valgte ordet colored for klassens navn, og ikke ordet green, som tydelig indikerer fargen vi ønsker.

Det er gitt et avsnitt. Det er gitt knapper 'gjennomstrek', 'gjør fet', 'gjør rød'. La det slik at ved et trykk på hver knapp skjer den angitte handlingen med avsnittet (blir rødt, for eksempel).