Le variabili CSS sono molto comode quando dobbiamo creare i file CSS per le nostre applicazioni, ma la loro visibilità non si ferma ai soli file CSS. Una delle funzionalità più importanti delle variabili CSS consiste nella possibilità di leggerne e impostarne il valore tramite JavaScript.
Per accedere al valore di una variabile dobbiamo accedere allo stile che la definisce tramite il metodo getComputedStyle o tramite la proprietà style di un elemento a cui è associato lo stile che contiene la variabile. Una volta ottenuto lo stile, usiamo i metodi getPropertyValue e setProperty per leggere e scrivere il valore della variabile.
Il metodo getPropertyValue accetta in input il nome della variabile e ne restituisce il valore mentre il metodo setProperty prende in input il nome della variabile e il valore da impostare.
// legge il valore dallo stile di un elemento element.style.getPropertyValue("--my-var"); //legge lo stile da qualunque elemento e recupera il valore della variabile getComputedStyle(element).getPropertyValue("--my-var"); // imposta il valore della variabile element.style.setProperty("--my-var", "10px");
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Migliorare l'organizzazione delle risorse con Azure Policy
Ottimizzare le pull con Artifact Cache di Azure Container Registry
Utilizzare una qualunque lista per i parametri di tipo params in C#
Creare un webhook in Azure DevOps
Gestione dell'annidamento delle regole dei layer in CSS
Utilizzare Azure AI Studio per testare i modelli AI
Utilizzare il metodo IntersectBy per eseguire l'intersection di due liste
.NET Aspire per applicazioni distribuite
Creare una libreria CSS universale: Nav menu
Utilizzare Container Queries nominali
Ordine e importanza per @layer in CSS
Introduzione ai web component HTML