Home Documentation Blog
Getting started General
Components
Forms
Trends
Utilities
Migrate from v1
  Join us
  JavaScript Articles

Utiliser les variables CSS avec JavaScript : lire et modifier les variables CSS

JavaScript

Apprenez à lire et à modifier les variables CSS avec JavaScript. Maîtrisez getComputedStyle() et setProperty() pour créer un style dynamique et interactif avec les propriétés personnalisées CSS.

Utiliser les variables CSS avec JavaScript : lire et modifier les variables CSS
Utiliser les variables CSS avec JavaScript : lire et modifier les variables CSS

Les variables CSS (aussi appelées propriétés personnalisées) sont des outils puissants pour créer des styles maintenables et dynamiques. Associées à JavaScript, elles permettent des mises à jour de style en temps réel sans manipuler directement chaque propriété CSS. Ce guide vous montre comment lire les variables CSS et modifier les variables CSS avec JavaScript.

Que sont les variables CSS ?

Les variables CSS sont des propriétés personnalisées définies avec un préfixe double tiret (--variable-name) qui peuvent être réutilisées tout au long de votre feuille de style. Elles sont généralement définies dans le sélecteur :root pour un accès global. 

:root {
  --primary-color: #3498db;
  --font-size: 16px;
  --spacing: 20px;
}

.element {
  color: var(--primary-color);
  font-size: var(--font-size);
  margin: var(--spacing);
}

Lire les variables CSS avec JavaScript

Pour lire la valeur d’une variable CSS en JavaScript, utilisez getComputedStyle() combiné avec getPropertyValue(). Cela lit la valeur calculée de la variable CSS.

Utilisation de base

// Get CSS variable from :root (document.documentElement)
const rootStyles = getComputedStyle(document.documentElement);
const primaryColor = rootStyles.getPropertyValue('--primary-color');

console.log(primaryColor); // "#3498db" (includes spaces, use trim() to remove)

// Get CSS variable from a specific element
const element = document.querySelector('.my-element');
const elementStyles = getComputedStyle(element);
const fontSize = elementStyles.getPropertyValue('--font-size').trim();

console.log(fontSize); // "16px"

Fonction utilitaire

// Helper function to get CSS variable
function getCSSVariable(variableName, element = document.documentElement) {
  return getComputedStyle(element)
    .getPropertyValue(variableName)
    .trim();
}

// Usage
const primaryColor = getCSSVariable('--primary-color');
const fontSize = getCSSVariable('--font-size');
const spacing = getCSSVariable('--spacing', document.querySelector('.container'));

console.log(primaryColor); // "#3498db"
console.log(fontSize);     // "16px"
console.log(spacing);      // "20px"

Lire plusieurs variables

// Get multiple CSS variables at once
function getCSSVariables(variableNames, element = document.documentElement) {
  const styles = getComputedStyle(element);
  const variables = {};
  
  variableNames.forEach(name => {
    variables[name] = styles.getPropertyValue(name).trim();
  });
  
  return variables;
}

// Usage
const theme = getCSSVariables([
  '--primary-color',
  '--secondary-color',
  '--font-size',
  '--spacing'
]);

console.log(theme);
// {
//   '--primary-color': '#3498db',
//   '--secondary-color': '#2ecc71',
//   '--font-size': '16px',
//   '--spacing': '20px'
// }

Modifier les variables CSS avec JavaScript

Pour modifier une variable CSS, utilisez la méthode setProperty() sur l’objet style d’un élément. Cela met à jour la valeur de la variable, et tous les éléments qui l’utilisent refléteront ce changement.

Utilisation de base

// Change CSS variable on :root
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

// Change CSS variable on a specific element
const element = document.querySelector('.my-element');
element.style.setProperty('--font-size', '20px');

// Change CSS variable with priority (important)
document.documentElement.style.setProperty('--spacing', '30px', 'important');

Fonction utilitaire

// Helper function to set CSS variable
function setCSSVariable(variableName, value, element = document.documentElement) {
  element.style.setProperty(variableName, value);
}

// Usage
setCSSVariable('--primary-color', '#e74c3c');
setCSSVariable('--font-size', '20px');
setCSSVariable('--spacing', '30px', document.querySelector('.container'));

Supprimer des variables CSS

// Remove a CSS variable (resets to initial value)
document.documentElement.style.removeProperty('--primary-color');

// Or set to empty string
document.documentElement.style.setProperty('--primary-color', '');

Exemples pratiques

Exemple 1 : sélecteur de thème dynamique

// Theme switcher using CSS variables
const themes = {
  light: {
    '--bg-color': '#ffffff',
    '--text-color': '#333333',
    '--primary-color': '#3498db'
  },
  dark: {
    '--bg-color': '#1a1a1a',
    '--text-color': '#ffffff',
    '--primary-color': '#9b59b6'
  }
};

function setTheme(themeName) {
  const theme = themes[themeName];
  if (!theme) return;
  
  Object.entries(theme).forEach(([variable, value]) => {
    document.documentElement.style.setProperty(variable, value);
  });
}

// Usage
setTheme('dark');
setTheme('light');

Exemple 2 : sélecteur de couleur interactif

// Update CSS variable from color input
const colorPicker = document.querySelector('#color-picker');

colorPicker.addEventListener('input', (e) => {
  const color = e.target.value;
  document.documentElement.style.setProperty('--primary-color', color);
});

// HTML: <input type="color" id="color-picker" value="#3498db">

Exemple 3 : contrôle du spacing réactif

// Adjust spacing with range input
const spacingSlider = document.querySelector('#spacing-slider');

spacingSlider.addEventListener('input', (e) => {
  const spacing = `${e.target.value}px`;
  document.documentElement.style.setProperty('--spacing', spacing);
  
  // Display current value
  const currentSpacing = getComputedStyle(document.documentElement)
    .getPropertyValue('--spacing')
    .trim();
  console.log(`Current spacing: ${currentSpacing}`);
});

// HTML: <input type="range" id="spacing-slider" min="10" max="50" value="20">

Exemple 4 : ajustement de la taille de police en temps réel

// Font size control
function adjustFontSize(delta) {
  const currentSize = parseInt(
    getComputedStyle(document.documentElement)
      .getPropertyValue('--font-size')
      .trim()
  );
  
  const newSize = currentSize + delta;
  document.documentElement.style.setProperty('--font-size', `${newSize}px`);
}

// Usage with buttons
document.querySelector('#increase-font').addEventListener('click', () => {
  adjustFontSize(2);
});

document.querySelector('#decrease-font').addEventListener('click', () => {
  adjustFontSize(-2);
});

Exemple 5 : animation avec variables CSS

// Animate CSS variable value
function animateVariable(variableName, from, to, duration = 1000) {
  const startTime = performance.now();
  const element = document.documentElement;
  
  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    
    // Linear interpolation
    const current = from + (to - from) * progress;
    element.style.setProperty(variableName, current);
    
    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }
  
  requestAnimationFrame(animate);
}

// Usage: animate --primary-color from #3498db to #e74c3c
animateVariable('--primary-color', '#3498db', '#e74c3c', 2000);

Exemple interactif complet

Voici un exemple complet qui combine la lecture et la modification des variables CSS : 

<!-- HTML -->
<div class="controls">
  <label>Primary Color:</label>
  <input type="color" id="primary-color" value="#3498db">
  
  <label>Font Size:</label>
  <input type="range" id="font-size" min="12" max="24" value="16">
  <span id="font-size-display">16px</span>
  
  <button id="reset">Reset</button>
</div>

<div class="content">
  <p>This text uses CSS variables!</p>
</div>
/* CSS */
:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

.content {
  color: var(--primary-color);
  font-size: var(--font-size);
}
// JavaScript
// Get initial values
const initialColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color')
  .trim();
const initialSize = getComputedStyle(document.documentElement)
  .getPropertyValue('--font-size')
  .trim();

// Color picker
document.querySelector('#primary-color').addEventListener('input', (e) => {
  document.documentElement.style.setProperty('--primary-color', e.target.value);
});

// Font size slider
const fontSizeSlider = document.querySelector('#font-size');
const fontSizeDisplay = document.querySelector('#font-size-display');

fontSizeSlider.addEventListener('input', (e) => {
  const size = `${e.target.value}px`;
  document.documentElement.style.setProperty('--font-size', size);
  fontSizeDisplay.textContent = size;
});

// Reset button
document.querySelector('#reset').addEventListener('click', () => {
  document.documentElement.style.setProperty('--primary-color', initialColor);
  document.documentElement.style.setProperty('--font-size', initialSize);
  document.querySelector('#primary-color').value = initialColor;
  fontSizeSlider.value = parseInt(initialSize);
  fontSizeDisplay.textContent = initialSize;
});

Bonnes pratiques

1. Utilisez :root pour les variables globales

Définissez les variables CSS globales dans :root pour un accès et une modification faciles : 

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing: 20px;
}

2. Équipez toujours les valeurs avec trim()

getPropertyValue() renvoie des valeurs avec des espaces de début et de fin. Utilisez toujours .trim() : 

// Good
const value = getComputedStyle(element)
  .getPropertyValue('--variable')
  .trim();

// Bad - may include unwanted spaces
const value = getComputedStyle(element).getPropertyValue('--variable');

3. Mettez en cache les résultats de getComputedStyle()

Pour les performances, mettez en cache les résultats de getComputedStyle() lorsque vous lisez plusieurs variables : 

// Good - cache the result
const styles = getComputedStyle(document.documentElement);
const color = styles.getPropertyValue('--primary-color').trim();
const size = styles.getPropertyValue('--font-size').trim();

// Bad - calls getComputedStyle() multiple times
const color = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color')
  .trim();
const size = getComputedStyle(document.documentElement)
  .getPropertyValue('--font-size')
  .trim();

4. Utilisez setProperty() pour les mises à jour dynamiques

Utilisez toujours setProperty() au lieu de définir directement les propriétés de style : 

// Good
element.style.setProperty('--primary-color', '#e74c3c');

// Bad - doesn't work for CSS variables
element.style['--primary-color'] = '#e74c3c';

5. Gérez les variables manquantes

Vérifiez toujours si une variable CSS existe avant de l’utiliser : 

function getCSSVariable(variableName, element = document.documentElement) {
  const value = getComputedStyle(element)
    .getPropertyValue(variableName)
    .trim();
  
  if (!value) {
    console.warn(`CSS variable ${variableName} not found`);
    return null;
  }
  
  return value;
}

Problèmes courants et solutions

Problème 1 : la variable renvoie une chaîne vide

Problème : getPropertyValue() renvoie une chaîne vide si la variable n’existe pas. 

// Solution: Check for empty string
const value = getComputedStyle(document.documentElement)
  .getPropertyValue('--non-existent')
  .trim();

if (value) {
  console.log(value);
} else {
  console.log('Variable not found');
}

Problème 2 : la variable ne se met pas à jour

Problème : les changements de variables CSS peuvent ne pas apparaître si l’élément n’utilise pas la variable. 

// Make sure the element actually uses the CSS variable
// CSS
.element {
  color: var(--primary-color); /* Must use var() */
}

// JavaScript
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
// Now .element will update

Problème 3 : performances avec des mises à jour fréquentes

Problème : appeler setProperty() en succession rapide peut provoquer des problèmes de performance. 

// Solution: Debounce or throttle updates
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

const updateVariable = debounce((variable, value) => {
  document.documentElement.style.setProperty(variable, value);
}, 100);

// Usage
slider.addEventListener('input', (e) => {
  updateVariable('--spacing', `${e.target.value}px`);
});

Compatibilité navigateur

Les variables CSS et les méthodes JavaScript bénéficient d’une excellente prise en charge par les navigateurs :

  • Variables CSS : tous les navigateurs modernes (Chrome 49+, Firefox 31+, Safari 9.1+, Edge 15+)
  • getComputedStyle() : tous les navigateurs (IE9+)
  • setProperty() : tous les navigateurs (IE9+)

Conclusion

Les variables CSS associées à JavaScript offrent une manière puissante de créer un style dynamique et interactif. En utilisant getComputedStyle().getPropertyValue() pour lire les variables et setProperty() pour les mettre à jour, vous pouvez créer des sélecteurs de thème, des sélecteurs de couleur, des contrôles réactifs et des ajustements de style en temps réel sans manipuler directement les propriétés CSS individuelles.

N’oubliez pas de toujours retirer les espaces avec trim() lorsque vous lisez les variables CSS, de mettre en cache les résultats de getComputedStyle() pour les performances, et de gérer les cas limites comme les variables manquantes. Avec ces techniques, vous pourrez créer des applications web plus maintenables et plus interactives.

Catégories

Tous les articles
Android (1)
Angular (1)
Axentix (2)
Axios (1)
CSS (3)
Cursor (1)
Http (1)
JavaScript (13)
NativeWind (1)
Shacdn (2)
Tamagui (3)
WebSockets (1)

Commencez à créer avec Axentix

Prêt à créer des sites web exceptionnels ? Commencez avec le framework Axentix dès aujourd'hui.

Commencer

Articles similaires

Comment utiliser forEach pour un objet en JavaScript : guide complet recommended article

Comment utiliser forEach pour un objet en JavaScript : guide complet

Apprenez a iterer sur des objets JavaScript en utilisant forEach avec Object.keys(), Object.values() et Object.entries(). Guide complet avec exemples, conseils de performance et cas d’usage concrets.

Read article
Corriger l’erreur JavaScript "replaceAll is not a function" : guide complet recommended article

Corriger l’erreur JavaScript "replaceAll is not a function" : guide complet

Apprenez à corriger l’erreur JavaScript « replaceAll is not a function ». Guide complet couvrant la compatibilité des navigateurs, les solutions alternatives et les bonnes pratiques.

Read article
Fichier APK : qu'est-ce que c'est et comment ça fonctionne ? recommended article

Fichier APK : qu'est-ce que c'est et comment ça fonctionne ?

Découvrez tout sur les fichiers APK : ce qu’ils sont, comment ils fonctionnent, leurs composants, le processus d’installation, les considérations de sécurité et en quoi ils diffèrent des fichiers AAB.

Read article