Come cambiare le variabili CSS attraverso JavaScript?

Le variabili CSS sono proprietà personalizzate generate dallo sviluppatore e consistono in un nome e un valore particolare. Il vantaggio di utilizzare queste variabili è che una volta dichiarate queste possono essere usate altrove nel documento e ti impedisce di scrivere valori CSS ridondanti ancora e ancora.

Tuttavia, a volte in alcuni scenari come quando si progettano un sito Web reattivo o recuperano determinati dati dal database richiederesti di recuperare o aggiornare i valori di alcune variabili CSS. Pertanto, questo può essere fatto utilizzando il metodo JavaScript getComputeDStyle () e il metodo setProperty ().

Di seguito abbiamo dimostrato con l'aiuto di un esempio come modificare le variabili CSS usando JavaScript.

Come cambiare le variabili CSS attraverso JavaScript

Ai fini della comprensione di come cambiare una variabile CSS usando JavaScript, consideriamo un esempio.

Html

Questo è un po 'di paragrafo.

Ottieni la famiglia dei caratteri
Imposta la famiglia dei caratteri

Stiamo creando un

Elemento per applicare un po 'di styling ad esso usando le variabili CSS e quindi creare due pulsanti per ottenere e impostare le variabili CSS usando JavaScript.

CSS

Ora prima di tutto, stiamo creando alcune variabili globali in: root selector e fornendo loro alcuni valori.

:radice
--Font-Family: Times New Roman;
--Font-size: 30px;

Ora per utilizzare queste variabili nel paragrafo segui lo snippet del codice di seguito.

P
Colore: marrone;
Font-Family: var (-Font-Family);
Font-size: var (-dimensione del carattere);

Nel codice sopra, stiamo dando al paragrafo un po 'di colore e usando la funzione var (), stiamo accedendo alle nostre variabili CSS per fornire la famiglia e le dimensioni dei caratteri al paragrafo.

Ora, vogliamo aggiornare i valori delle variabili CSS usando JavaScript. Ecco come lo fai. Nel codice seguente stiamo fondamentalmente recuperando e aggiornando il valore della variabile -font -family.

Js

var store = documento.QuerySelector (': root');
funzione getFontFamily ()
var value = getComputEdStyle (Store);
Avviso ("Famiglia dei caratteri iniziali:"+ valore.getPropertyValue ('-Font-Family'));

funzione setFontFamily ()
negozio.stile.setProperty ('-Font-Family', 'Verdana');

Nel codice sopra, stiamo creando una variabile con il nome "Store" per archiviare tutte le variabili CSS dichiarate nel selettore: Root Selector usando il metodo QuerySelector ().

Stiamo quindi generando una funzione "getFontfamily" per recuperare le variabili inizialmente salvate nella variabile "Store" utilizzando il metodo getComputerStyle () e successivamente stiamo usando la funzione Alert () per mostrare il valore iniziale della variabile corrispondente a la famiglia dei caratteri.

Infine, stiamo nuovamente generando un'altra funzione "setFontFamily ()" per impostare il nuovo valore della variabile -font -family usando il metodo setProperty ().

Produzione

Ecco come appare inizialmente la nostra pagina web.

Fai clic sul pulsante Ottieni per recuperare il valore della famiglie di carattere originale.

Dopo aver fatto clic.

La famiglia di carattere iniziale è il nuovo romano.

Per aggiornare il carattere familiare fare clic sul pulsante Imposta.

Dopo aver fatto clic sul pulsante.

La variabile -font -family è stata aggiornata con successo a "Verdana".

Conclusione

Ai fini del recupero o dell'aggiornamento dei valori di alcune variabili CSS tramite JavaScript, ci sono due metodi disponibili. Il primo è il metodo getComputerStyle () per recuperare il valore di una variabile, nel frattempo, per aggiornare il valore di una variabile utilizzando il metodo setProperty (). La modifica delle variabili CSS tramite JavaScript è utile in scenari come quando si progetta un sito Web reattivo o recupera alcuni dati dal database. Questo tutorial discute su come cambiare queste variabili attraverso JavaScript con l'aiuto di un esempio adatto.