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
Creare una libreria CSS universale: i bottoni
Esporre i propri servizi applicativi con Semantic Kernel e ASP.NET Web API
Generare una User Delegation SAS in .NET per Azure Blob Storage
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Gestione dell'annidamento delle regole dei layer in CSS
Gestione degli stili CSS con le regole @layer
Escludere alcuni file da GitHub Secret Scanning
Utilizzare Container Queries nominali
Migliorare l'organizzazione delle risorse con Azure Policy
Utilizzare Copilot con Azure Cosmos DB
.NET Conference Italia 2024
.NET Aspire per applicazioni distribuite
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare il pattern matching per semplificare le espressioni
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare requestAnimationFrame per animazioni fluide
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!