Aggiornare le variabili con JavaScript
Aggiorni dinamicamente le custom property CSS da JavaScript utilizzando style.setProperty().
Aggiornare le variabili con JavaScript è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Perché aggiornare le variabili CSS da JS?
Le proprietà personalizzate CSS sono dinamiche nel browser. Modificandole tramite JavaScript, tutti gli elementi che utilizzano quella proprietà vengono aggiornati immediatamente: ciò consente di creare temi dinamici, slider in tempo reale e stili basati sullo stato senza attivare o disattivare numerose classi.
Ottenere il valore di una proprietà personalizzata
Legga il valore di una proprietà personalizzata utilizzando getComputedStyle():
<div class="demo" style="background:#3b82f6;color:#fff;padding:16px;">Reading --primary-color</div>
<p>Value: <span id="output">(reading...)</span></p>
<script>
const root = document.documentElement;
const value = getComputedStyle(root)
.getPropertyValue('--primary-color').trim();
console.log(value); // '#3b82f6'
document.getElementById('output').textContent = value;
</script>
Impostare il valore di una proprietà personalizzata
Aggiorni una proprietà personalizzata utilizzando style.setProperty() su qualsiasi elemento:
<div class="card">
Card body
</div>
<script>
// Set globally on :root
document.documentElement.style.setProperty('--primary-color', '#ef4444');
// Set on a specific element
document.querySelector('.card').style.setProperty('--card-bg', 'pink');
</script>
Rimuovere una proprietà personalizzata
Rimuova una sovrascrittura della proprietà, ripristinando il valore dichiarato nel CSS, utilizzando style.removeProperty():
<div class="badge">Removing an inline override restores the :root value</div>
<script>
// Simulate an inline override was set, then removed
document.documentElement.style.setProperty('--primary-color', 'crimson');
document.documentElement.style.removeProperty('--primary-color');
// Now the :root CSS value applies again
</script>
Pattern per il cambio del tema
Un pattern classico per il cambio del tema sostituisce un attributo data-theme e definisce le variabili per ciascun tema nel CSS:
<div class="panel">Dark theme applied via data-theme</div>
<script>
document.body.dataset.theme = 'dark';
</script>
Barra di avanzamento con una variabile CSS
Gestisca interamente il valore di una barra di avanzamento tramite una variabile CSS impostata da JavaScript:
<div class="progress-bar"></div>
<script>
function setProgress(pct) {
document.querySelector('.progress-bar')
.style.setProperty('--progress', pct + '%');
}
setProgress(70);
</script>
Tracciamento della posizione del mouse
Crei effetti parallasse o effetti che seguono il cursore aggiornando le variabili CSS di posizione durante il movimento del mouse:
<div class="cursor-dot"></div>
<script>
document.addEventListener('mousemove', e => {
document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
});
</script>
Variabili guidate dallo scorrimento
Aggiorni una variabile CSS in base alla posizione dello scorrimento per creare animazioni collegate allo scorrimento (le API moderne gestiscono meglio questo scenario, ma JS+variabile resta un approccio semplice):
<div style="height: 800px; background: linear-gradient(#f8fafc, #cbd5e1);">
<div class="scroll-fill"></div>
</div>
<script>
window.addEventListener('scroll', () => {
const pct = window.scrollY / (document.body.scrollHeight - window.innerHeight);
document.documentElement.style.setProperty('--scroll', pct);
});
</script>
Preferenze dell'utente con localStorage
Salvi il tema selezionato in localStorage e lo ripristini al caricamento della pagina:
<button class="theme-toggle" onclick="toggleTheme()">Toggle theme</button>
<div class="content">Themed content</div>
<script>
// Restore
const saved = localStorage.getItem('theme') || 'light';
document.documentElement.dataset.theme = saved;
// Toggle
function toggleTheme() {
const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
document.documentElement.dataset.theme = next;
localStorage.setItem('theme', next);
}
</script>
Animazioni CSS e JS
Per ottenere animazioni fluide, preferisca le transizioni CSS che reagiscono alle modifiche delle proprietà personalizzate, invece dei cicli JavaScript con requestAnimationFrame. Il browser gestisce l'interpolazione nel thread del compositore.
Proprietà tipizzate con @property
La registrazione di una variabile con @property consente ai browser di interpolarla nelle transizioni, cosa che non funziona con le proprietà personalizzate non registrate:
<div class="track">
<div class="bar"></div>
</div>
Verifica rapida
Quale metodo JavaScript modifica una proprietà personalizzata CSS sull'elemento radice?
Riepilogo
Utilizzi style.setProperty() per aggiornare le proprietà personalizzate CSS da JavaScript. Le modifiche si propagano immediatamente a tutti gli elementi che le utilizzano. Questo pattern consente di creare temi dinamici, barre di avanzamento animate, effetti legati al cursore e animazioni guidate dallo scorrimento, senza modificare gli elenchi di classi o le stringhe di stili inline per più proprietà.
Domande Frequenti
La lezione «Aggiornare le variabili con JavaScript» è gratuita?
Sì — il testo completo di «Aggiornare le variabili con JavaScript» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Aggiornare le variabili con JavaScript»?
Aggiorni dinamicamente le custom property CSS da JavaScript utilizzando style.setProperty(). Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Aggiornare le variabili con JavaScript»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Dichiarare e utilizzare le custom property
- Valori di fallback e var()
- Definire lo scope delle variabili per i componenti
- Aggiornare le variabili con JavaScript