Hvordan endre CSS -variabler gjennom JavaScript?

CSS -variabler er tilpassede egenskaper som genereres av utvikleren og består av et bestemt navn og verdi. Fordelen med å bruke disse variablene er at en gang erklært disse kan brukes andre steder i dokumentet og forhindrer deg i å skrive overflødige CSS -verdier igjen og igjen.

Noen ganger i visse scenarier som når du designer et responsivt nettsted, eller henter visse data fra databasen, vil du imidlertid kreve enten å hente, eller oppdatere verdier av visse CSS -variabler. Derfor kan dette gjøres ved å bruke JavaScript getComputedStyle () -metoden, og SetProperty () -metoden.

Nedenfor har vi demonstrert ved hjelp av et eksempel på hvordan du endrer CSS -variabler ved bruk av JavaScript.

Hvordan endre CSS -variabler gjennom JavaScript

For å forstå hvordan du endrer en CSS -variabel ved hjelp av JavaScript, la oss vurdere et eksempel.

Html

Dette er noe avsnitt.

Få fontfamilie
Sett fontfamilie

Vi skaper en

element for å bruke litt styling på det ved hjelp av CSS -variabler og deretter lage to knapper for å få og angi CSS -variabler ved hjelp av JavaScript.

CSS

Nå først og fremst lager vi noen globale variabler i: rotvelgeren og gir dem noen verdier.

: root
--Font-Family: Times New Roman;
--Font-størrelse: 30px;

Nå for å bruke disse variablene på avsnittet, følg kodebiten nedenfor.

P
Farge: brun;
Font-Family: var (-Font-Family);
Font-størrelse: var (-Font-size);

I koden over gir vi avsnittet litt farger og bruker var () -funksjonen, vi får tilgang til CSS -variablene våre for å gi fontfamilien og skriftstørrelsen til avsnittet.

Nå ønsker vi å oppdatere verdiene til CSS -variablene ved hjelp av JavaScript. Slik gjør du det. I koden nedenfor henter vi i utgangspunktet i tillegg til å oppdatere verdien av -font -Family Variable.

JS

var butikk = dokument.QuerySelector (': root');
funksjon getFontFamily ()
var verdi = getComputedStyle (butikk);
Varsel ("Opprinnelig fontfamilie:"+ Verdi.getPropertyValue ('-font-family'));

funksjon setFontFamily ()
butikk.stil.SetProperty ('-Font-Family', 'Verdana');

I koden ovenfor oppretter vi en variabel etter navnet "Store" for å lagre alle CSS -variablene som er erklært i: Root Selector ved hjelp av QuerySelector () -metoden.

Vi genererer deretter en funksjon "getfontfamily" for å hente variablene som opprinnelig ble lagret i "Store" -variabelen ved å bruke GetComputedStyle () -metoden, og etterpå bruker vi Alert () -funksjon for å vise den opprinnelige verdien av variabelen som tilsvarer Fontfamilien.

Til slutt genererer vi igjen en annen funksjon “SetFontFamily ()” for å angi den nye verdien av -font -Family -variabelen ved hjelp av SetProperty () -metoden.

Produksjon

Slik ser websiden vår ut.

Klikk på Get-knappen for å hente verdien av den originale fontfamilien.

Etter å ha klikket.

Den første font-familiens tid er New Roman.

For å oppdatere fontfamilien, klikk på SET-knappen.

Etter at knappen er klikket.

-Font -Family -variabelen er oppdatert til “Verdana” med hell.

Konklusjon

For å hente eller oppdatere verdiene til visse CSS -variabler gjennom JavaScript er det to metoder tilgjengelig. Den første er metoden GetComputedStyle () for å hente verdien av en variabel, i mellomtiden for å oppdatere verdien til en variabel ved hjelp av SetProperty () -metoden. Endring av CSS -variabler gjennom JavaScript kommer godt med i scenarier, for eksempel når du designer et responsivt nettsted, eller henter visse data fra databasen. Denne opplæringen diskuterer hvordan du endrer disse variablene gjennom JavaScript ved hjelp av et passende eksempel.