Styling med CSS-klasser i JavaScript

I föregående lektion lärde vi oss att ändra CSS-stilar för element genom att ändra attributet style. Oftast är det inte en särskilt bra idé. Anledningen är att om man sprider ut CSS-stilar i JavaScript-koden kommer det i framtiden att vara problematiskt att ändra webbplatsens design, eftersom man måste gräva i JavaScript-koden för att hitta stilarna som är inbäddade där.

För enklare framtida underhåll är det bättre att lägga till eller ta bort CSS-klasser från ett element, och på så sätt styla dem på önskat sätt.

Låt oss titta på ett exempel. Låt oss säga att vi har några stycken:

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

Låt oss göra så att när man klickar på vilket stycke som helst, får det stycket någon färg, till exempel grön. För att göra detta, skapa en speciell klass i CSS-filen för att färglägga styckena:

.colored {
	color: green;
}

Fördelen med att använda en klass är att det nu enkelt går att ändra önskad färg - för att göra det behöver man bara göra en ändring i CSS-filen, utan att röra JavaScript-koden. Det är särskilt bekvämt i det fallet att om du skriver JavaScript-koden, och någon annan sedan skall styla den (kanske en mindre kvalificerad person, som bara kan arbeta med CSS).

Så, nu efter att klassen introducerats, kan man vid klick på vilket stycke som helst ändra dess färg, helt enkelt genom att lägga till vår klass till det:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // lägger till klassen till stycket
	});
}

Förklara varför jag valde ordet colored för klassnamnet, istället för ordet green, som tydligt indikerar den färg vi önskar.

Ett stycke är givet. Knappar 'genomstruken', 'gör fet', 'gör röd' är givna. Låt så att vid klick på varje knapp utförs den givna åtgärden på stycket (blir till exempel rött).