Det er ikke noe enkelt svar på dette spørsmålet ettersom de to språkene nærmer seg variabel tilordning og manipulasjon på forskjellige måter. Generelt sett er imidlertid et problem med å prøve å endre en CSS-variabel med JavaScript at de to språkene bruker forskjellige syntakser for å deklarere og få tilgang til variabler. I tillegg er CSS-variabler vanligvis definert på stilarknivå i stedet for på individuelle elementnivå, noe som kan gjøre dem vanskelige å få tilgang til fra JavaScript-koden.
var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");
Denne kodelinjen setter en ny verdi for en CSS-variabel. Den første linjen får elementet med ID-en til "element". Den andre linjen setter verdien av CSS-variabelen «–variable» til «ny-verdi».
CSS-variabler
CSS-variabler er en fin måte å lagre data i CSS-filene dine uten å måtte bruke globale variabler. Du kan bruke dem til å lagre informasjon som gjeldende sides bredde eller høyde, eller gjeldende skriftstørrelse.
For å bruke en CSS-variabel i JavaScript-koden din, må du først inkludere css-egenskapen i dokumentets stilark. Deretter kan du definere variabelen ved å bruke søkeordet var:
var width = document.getElementById(“myElement”).offsetWidth;
Du kan også bruke css-egenskapen for å få tilgang til individuelle verdier fra en variabel:
var width = document.getElementById(“myElement”).offsetWidth; var height = document.getElementById(“myElement”).offsetHeight;
Kontroller CSS
I JavaScript er det noen få måter å kontrollere CSS på. En måte er å bruke css-egenskapen. Denne egenskapen lar deg angi stilen for et spesifikt element i dokumentet.
En annen måte å kontrollere CSS på er å bruke stilegenskapen. Denne egenskapen lar deg angi stilen for alle elementene i dokumentet.
