Mise à jour des variables avec JavaScript
Mettez dynamiquement à jour les propriétés personnalisées CSS depuis JavaScript avec style.setProperty().
Mise à jour des variables avec JavaScript est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Pourquoi mettre à jour les variables CSS depuis JS ?
Les propriétés personnalisées CSS sont dynamiques dans le navigateur. Leur modification via JavaScript met immédiatement à jour tous les éléments qui utilisent cette propriété, ce qui permet de créer des thèmes dynamiques, des curseurs en temps réel et des styles pilotés par l'état sans activer ou désactiver de nombreuses classes.
Lire la valeur d'une propriété personnalisée
Lisez la valeur d'une propriété personnalisée avec 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>
Définir la valeur d'une propriété personnalisée
Mettez à jour une propriété personnalisée avec style.setProperty() sur n'importe quel élément :
<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>
Supprimer une propriété personnalisée
Supprimez la surcharge d'une propriété (pour revenir à la valeur déclarée en CSS) avec 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>
Modèle de sélecteur de thème
Un sélecteur de thème classique qui remplace un attribut data-theme et définit les variables de chaque thème en CSS :
<div class="panel">Dark theme applied via data-theme</div>
<script>
document.body.dataset.theme = 'dark';
</script>
Barre de progression avec une variable CSS
Pilotez entièrement la valeur d'une barre de progression au moyen d'une variable CSS définie depuis JavaScript :
<div class="progress-bar"></div>
<script>
function setProgress(pct) {
document.querySelector('.progress-bar')
.style.setProperty('--progress', pct + '%');
}
setProgress(70);
</script>
Suivi de la position de la souris
Créez des effets de parallaxe ou qui suivent le curseur en mettant à jour les variables CSS de position lors du déplacement de la souris :
<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>
Variables pilotées par le défilement
Mettez à jour une variable CSS selon la position de défilement pour créer des animations liées au défilement (les API modernes gèrent mieux ce cas, mais l'approche JS + variable reste simple) :
<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>
Préférences utilisateur avec localStorage
Enregistrez le thème sélectionné dans localStorage et restaurez-le au chargement de la page :
<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>
Animations CSS et JS
Pour obtenir des animations fluides, privilégiez les transitions CSS qui réagissent aux modifications des propriétés personnalisées plutôt que les boucles JS requestAnimationFrame. Le navigateur prend en charge l'interpolation sur le fil de composition.
Propriétés typées avec @property
L'enregistrement d'une variable avec @property permet aux navigateurs de l'interpoler dans les transitions, ce qui ne fonctionne pas avec les propriétés personnalisées non enregistrées :
<div class="track">
<div class="bar"></div>
</div>
Vérification rapide
Quelle méthode JavaScript modifie une propriété personnalisée CSS sur l'élément racine ?
Récapitulatif
Utilisez style.setProperty() pour mettre à jour les propriétés personnalisées CSS depuis JavaScript. Les modifications se propagent instantanément à tous les éléments qui les utilisent. Ce modèle permet de créer des thèmes dynamiques, des barres de progression animées, des effets de curseur et des animations pilotées par le défilement, sans toucher aux listes de classes ni aux chaînes de styles en ligne pour plusieurs propriétés.
Questions Fréquemment Posées
La leçon « Mise à jour des variables avec JavaScript » est-elle gratuite ?
Oui — le texte complet de « Mise à jour des variables avec JavaScript » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Mise à jour des variables avec JavaScript » ?
Mettez dynamiquement à jour les propriétés personnalisées CSS depuis JavaScript avec style.setProperty(). Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Mise à jour des variables avec JavaScript » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Déclaration et utilisation de propriétés personnalisées
- Valeurs de repli et var()
- Portée des variables aux composants
- Mise à jour des variables avec JavaScript