JavaScript — Introduktion genom exempel

1.5 Referera till CSS

I detta exempel ska vi se hur vi kan förändra ett elements CSS-kod. Det är alltså elementets stil som förändras, så vi refererar först till elementet och sedan dess stil med hjälp av tillägget style och den egenskap vi vill förändra. Det görs alltså ingen förändring av CSS-koden i CSS-filen.

Exemplet visar också hur vi kan ändra, lägga till och ta bort en "class" i ett element. Vi tar här upp två funktioner i classList och återkommer sedan till flera vid behov i kommande exempel.

12 min.

Sammanfattning

Vi kan referera till element och förändra eller lägga till en CSS-egenskap genom elementets style, t.ex. element.style.color = "#FD3476"; När en CSS-egenskap är inlagd med hjälp av JavaScript, kan vi också avläsa den vid ett senare tillfälle. Men det går inte avläsa den stil som endast är inlagd med CSS-koden i CSS-filen.

Egenskaper som i CSS innehåller ett bindestreck skrivs i JavaScript som ett sammansatt ord med s.k. kamelnotation, dvs det andra ordet inleds med en versal. T.ex. skrivs egenskapen font-size som fontSize i JavaScript.

För att referera till attributet class används tillägget .className. Finns det flera klasser inlagda i ett element, kan man referera till .classList och lägga till klasser med .add() eller ta bort dem med .remove(). Man kan också använda .toggle() för att omväxlande lägga till eller ta bort en klass.

Egna övningar

Här följer ett förslag på några egna övningar. Öppna filen test.html och test.js och utför följande, genom att skriva kod i init-funktionen. Öppna även filen test.css och se de classer som finns deklarerade där. Dessa används i några av nedanstående övningar.