Du vil at en knapp skal endre farge når brukeren klikker, at en meny skal gli inn fra siden, eller at et skjemafelt skal bli rødt når input er ugyldig. Alt dette handler om å endre CSS-styling fra JavaScript. Den mest robuste måten å gjøre det på er med classList, som lar deg legge til, fjerne og skru av og på CSS-klasser uten å blande styling inn i JavaScript-koden.
Problemet med inline styling i JavaScript
Hvert HTML-element har en style-egenskap du kan endre direkte i JavaScript. Skriver du element.style.color = "red", blir teksten rød. Det fungerer, men det skaper problemer.
For det første blander du CSS inn i JavaScript-filen. Skal du endre fargen senere, må du lete gjennom JavaScript-koden i stedet for CSS-filen. For det andre overskriver inline-styling CSS-regler, noe som gjør feilsøking vanskelig. Og for det tredje blir koden lang. Skal du endre farge, bakgrunn, font-størrelse og font-weight, trenger du fire separate linjer i JavaScript.
Med classList JavaScript trenger du bare en linje. Definer klassen i CSS-filen, og bruk classList til å legge den til elementet fra JavaScript.
classList.add legger til en klasse
Etter at du har valgt et element med querySelector, kan du bruke classList.add for å legge til en CSS-klasse. Skriver du element.classList.add("highlight"), får elementet klassen "highlight" lagt til i class-attributten sin.
All styling for klassen "highlight" er definert i CSS-filen. JavaScript vet ingenting om hva klassen gjør visuelt. Den bare legger den til. Denne separasjonen gjør koden enklere å vedlikeholde. Designeren endrer utseendet i CSS, utvikleren styrer oppførselen i JavaScript.
Legg merke til at du ikke bruker punktum foran klassenavnet i classList. I CSS skriver du .highlight, men classList handler utelukkende om klasser, så den vet allerede hva du mener.
classList.remove tar bort en klasse
Vil du fjerne en klasse, bruker du classList.remove. Skriver du element.classList.remove("highlight"), forsvinner klassen fra elementet. Class-attributten blir stående, men den er tom.
Remove er spesielt nyttig for å nullstille tilstander. Tenk deg et skjema der et felt markeres med en "error"-klasse når brukeren skriver feil. Når feilen er rettet, kaller du classList.remove("error") for å fjerne den visuelle markeringen.
classList.toggle skrur av og på
Toggle er den mest brukte classList-metoden i praksis. Den sjekker om klassen finnes på elementet. Har elementet klassen, fjernes den. Har det ikke klassen, legges den til. Det er som en lysbryter.
Kombinert med en eventlistener blir toggle kraftig. Fest en eventlistener til en knapp, og la den kalle classList.toggle("active") på et menyelement. Første klikk legger til klassen og viser menyen. Neste klikk fjerner klassen og skjuler den. Ingen if-sjekk trengs, toggle håndterer logikken for deg.
Denne teknikken brukes overalt i moderne nettsider. Hamburgermenyer, dropdown-lister, accordion-paneler og mørk modus er alle bygget med classList.toggle og events.
classList.contains sjekker om en klasse finnes
Noen ganger trenger du å vite om et element har en bestemt klasse uten å endre noe. classList.contains returnerer true eller false. Skriver du element.classList.contains("active"), får du svar på om elementet har klassen "active" akkurat nå.
Contains er nyttig i betingelser. Har brukeren allerede åpnet menyen? Sjekk om menyelementet har klassen "open" med contains, og gjør ulike ting avhengig av svaret.
Hvorfor classList i JavaScript gir renere kode enn style
Sammenlign de to tilnærmingene. Med style-egenskapen må du sette hver CSS-egenskap for seg: element.style.color, element.style.backgroundColor, element.style.fontSize, element.style.fontWeight. Fire linjer JavaScript for en visuell endring.
Med classList skriver du element.classList.add("highlight"). En linje. All styling samlet i CSS-filen. Skal du angre, skriver du classList.remove("highlight"). Igjen en linje. Med style-egenskapen må du nullstille hver egenskap separat.
Det er en god vane å holde JavaScript og CSS så adskilt som mulig. JavaScript styrer oppførselen (hva som skjer og når), CSS styrer utseendet (hvordan det ser ut). classList er bindeleddet mellom de to.
Plassering av script-taggen og defer
En vanlig feil er at JavaScript-koden prøver å velge elementer som ikke finnes ennå. Nettleseren leser HTML-filen ovenfra og ned. Legger du script-taggen i head, kjøres JavaScript-koden før body-elementene er lastet inn. Resultatet er at querySelector returnerer null, og koden feiler.
Du har to alternativer. Det ene er å plassere script-taggen nederst i body, etter alle HTML-elementene. Da er alt lastet når skriptet kjøres. Det andre er å bruke defer-attributten på script-taggen. Defer forteller nettleseren at den skal laste inn JavaScript-filen, men vente med å kjøre den til hele HTML-dokumentet er ferdig. Begge løsningene fungerer, men defer er den moderne standarden og lar deg plassere script-taggen i head der den logisk hører hjemme.
Neste steg med classList
Nå som du kan styre utseendet med classList JavaScript, er neste steg å koble det til brukerhandlinger. En klasse som legges til ved sideinnlasting er statisk. Kobler du classList.toggle til en eventlistener, reagerer siden på klikk, tastetrykk og musebevegelser. Les mer om events i JavaScript for å se hvordan.
Kurset JavaScript for nybegynnere med instruktør Lars Vidar Nordli viser deg classList i kontekst gjennom et praktisk prosjekt. Du bygger en handleliste-app der classList brukes sammen med events, DOM-manipulasjon og dynamisk elementoppretting for å lage en velfungerende, interaktiv nettside.
