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
Gestione degli environment per il deploy con un workflow di GitHub
Linting di un Dockerfile con un workflow di GitHub
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Routing statico e PreRendering in una Blazor Web App
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Eseguire una GroupBy per entity in Entity Framework
Short-circuiting della Pipeline in ASP.NET Core
Hosting di componenti WebAssembly in un'applicazione Blazor static
Effettuare il pull di git LFS in un workflow di GitHub
Creare moduli CSS in React
Creazione di componenti personalizzati in React.js con Tailwind CSS
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI