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.

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";
• 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.
• 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 är inlagd med CSS-koden i CSS-filen.
• 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.

• Ändra bakgrundsfärgen i knappen till en grön färg. Ändra också texten i knappen till fetstil.
  • Detta ska du göra genom att referera till elementets stil och de CSS-egenskaper som behövs.
  • Du ska alltså inte göra ändringarna direkt i CSS-filen, utan du ska göra dem med hjälp av JavaScript-kod i JS-filen.
• Ta fram en referens till fieldset-elementet i formuläret med id "inputForm". Avläs där className och skriv ut i console.log().
• Lägg med JavaScript till klassen "activeFields" i fieldset-elementet.
  • Du ska nu se en ram runt de båda textfälten.
• Ta med JavaScript bort klassen "activeFields" igen.
  • Ramen tas nu bort igen.