Der er ikke noget enkelt svar på dette spørgsmål, da de to sprog nærmer sig variabel tildeling og manipulation på forskellige måder. Generelt set er et problem med at forsøge at ændre en CSS-variabel med JavaScript, at de to sprog bruger forskellige syntakser til at deklarere og få adgang til variabler. Derudover er CSS-variabler typisk defineret på typografiark-niveau snarere end på det individuelle element-niveau, hvilket kan gøre dem svære at få adgang til inde fra JavaScript-kode.
var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");
Denne kodelinje indstiller en ny værdi for en CSS-variabel. Den første linje får elementet med ID'et "element". Den anden linje indstiller værdien af CSS-variablen "–variable" til "ny-værdi".
CSS variabler
CSS-variabler er en fantastisk måde at gemme data i dine CSS-filer uden at skulle bruge globale variabler. Du kan bruge dem til at gemme oplysninger som den aktuelle sides bredde eller højde eller den aktuelle skriftstørrelse.
For at bruge en CSS-variabel i din JavaScript-kode skal du først inkludere css-egenskaben i dit dokuments typografiark. Derefter kan du definere variablen ved hjælp af nøgleordet var:
var width = document.getElementById(“myElement”).offsetWidth;
Du kan også bruge egenskaben css til at få adgang til individuelle værdier fra en variabel:
var width = document.getElementById(“myElement”).offsetWidth; var height = document.getElementById(“myElement”).offsetHeight;
Styr CSS
I JavaScript er der et par måder at styre CSS på. En måde er at bruge css-egenskaben. Denne egenskab giver dig mulighed for at indstille stilen for et bestemt element i dit dokument.
En anden måde at styre CSS på er at bruge egenskaben style. Denne egenskab giver dig mulighed for at indstille stilen for alle elementer i dit dokument.
