Récupérer et manipuler les valeurs CSS en JavaScript avec getComputedStyle()

  📋 Copier le code

// Sélectionner l'élément cible dans le DOM
const element = document.querySelector('#mon-element');
// Obtenir l'objet CSSStyleDeclaration avec tous les styles calculés
const styles = window.getComputedStyle(element);
// Lecture via getPropertyValue — fonctionne avec les noms kebab-case CSS
const couleur = styles.getPropertyValue('background-color');
// Lecture via notation pointée — utiliser le camelCase équivalent
const couleurAlt = styles.backgroundColor;
console.log(couleur); // ex : "rgb(255, 255, 255)"

  📋 Copier le code

// Cibler l'élément par son identifiant
const boite = document.getElementById('boite-hero');
// getComputedStyle lit toutes les règles CSS appliquées, cascade incluse
const styles = window.getComputedStyle(boite);
// backgroundColor est toujours retourné au format rgb() dans les navigateurs modernes
const bgColor = styles.backgroundColor;
console.log('Couleur de fond calculée :', bgColor);
// Résultat typique : "rgb(30, 30, 46)" même si le CSS définissait "#1e1e2e"

  📋 Copier le code

// Lire les styles calculés du pseudo-élément ::before
const element = document.querySelector('.icone-fleche');
const stylesAvant = window.getComputedStyle(element, '::before');
// Récupérer le contenu CSS généré (valeur de la propriété content)
const contenu = stylesAvant.getPropertyValue('content');
console.log('Contenu ::before :', contenu); // ex : "\"→\""

  📋 Copier le code

// Lire un style inline existant (défini dans style="width:300px")
const element = document.querySelector('#barre-progres');
const largeurInline = element.style.width;
console.log(largeurInline); // "300px" si défini en inline, "" sinon
// Écrire un style inline — camelCase obligatoire pour les propriétés composées
element.style.backgroundColor = '#3498db';
element.style.transition = 'width 0.4s ease-in-out';
// Supprimer un style inline pour laisser la feuille CSS reprendre le contrôle
element.style.removeProperty('background-color');

  📋 Copier le code

// Récupérer la largeur calculée d'un élément en pixels
const carte = document.querySelector('.carte-produit');
const styles = window.getComputedStyle(carte);
// styles.width retourne "320px" — parseInt retire "px" et retourne 320
const largeur = parseInt(styles.width, 10); // toujours préciser la base 10
const zIndex = parseInt(styles.zIndex, 10);
console.log(`Largeur: ${largeur}px, z-index: ${zIndex}`);

  📋 Copier le code

// Lire l'opacité actuelle pour créer un effet de fondu progressif
const overlay = document.querySelector('.overlay-modal');
const styles = window.getComputedStyle(overlay);
// styles.opacity retourne "0.75" — parseFloat préserve les décimales
const opacite = parseFloat(styles.opacity); // 0.75
const taillePolice = parseFloat(styles.fontSize); // ex : 16.0 (en px)
const hauteurLigne = parseFloat(styles.lineHeight); // ex : 24.0 (en px)
console.log(`Opacité: ${opacite}, Font: ${taillePolice}px, Line-height: ${hauteurLigne}px`);

  📋 Copier le code

/**
 * Extrait la valeur numérique et l'unité d'une chaîne CSS.
 * @param {string} cssValue - ex : "1.5rem", "300px", "75%"
 * @returns {{ value: number, unit: string } | null}
 */
function extraireCSSValeurUnite(cssValue) {
  // Regex : capture les chiffres (avec décimale et signe) puis les caractères restants
  const match = cssValue.match(/^(-?\d*\.?\d+)(\D+)$/);
  if (!match) return null;
  return { value: parseFloat(match[1]), unit: match[2].trim() };
}
// Utilisation pratique
const styles = window.getComputedStyle(document.documentElement);
const fs = styles.fontSize; // ex : "18px"
const resultat = extraireCSSValeurUnite(fs);
// → { value: 18, unit: "px" }
console.log(`${resultat.value} ${resultat.unit}`);

  📋 Copier le code

// Lire une variable CSS définie sur :root ou un élément
const root = document.documentElement;
const styles = window.getComputedStyle(root);
// getPropertyValue avec le double tiret est obligatoire pour les custom properties
const couleurPrimaire = styles.getPropertyValue('--couleur-primaire').trim();
console.log('Couleur primaire :', couleurPrimaire); // ex : "#6366f1"
// Modifier une variable CSS globalement (s'applique à tout le document)
root.style.setProperty('--couleur-primaire', '#10b981');
// Modifier une variable sur un élément spécifique (portée locale)
const carte = document.querySelector('.carte-theme');
carte.style.setProperty('--rayon-bordure', '16px');
// Supprimer une variable CSS personnalisée
root.style.removeProperty('--couleur-primaire');

  📋 Copier le code

// Basculer entre thème clair et thème sombre via data-attribute + variables CSS
function toggleTheme() {
  const root = document.documentElement;
  const themeActuel = root.dataset.theme || 'clair';
  // On change uniquement un attribut data — les variables CSS sont gérées en CSS
  root.dataset.theme = themeActuel === 'clair' ? 'sombre' : 'clair';
  // Persister le choix dans localStorage pour les visites suivantes
  localStorage.setItem('theme-preference', root.dataset.theme);
}
// Au chargement, restaurer la préférence utilisateur
const prefSauvegardee = localStorage.getItem('theme-preference');
if (prefSauvegardee) document.documentElement.dataset.theme = prefSauvegardee;

  📋 Copier le code

/**
 * Anime la largeur d'un élément de sa valeur actuelle vers une cible.
 * @param {string} id        - Identifiant de l'élément DOM
 * @param {number} cible     - Largeur cible en pixels
 * @param {number} dureeMs   - Durée de l'animation en millisecondes
 */
function animerLargeur(id, cible, dureeMs = 400) {
  const el = document.getElementById(id);
  // Lire la largeur réelle, quelle que soit la source CSS
  const depart = parseInt(window.getComputedStyle(el).width, 10);
  const delta = cible - depart;
  const debut = performance.now();
  // Utiliser requestAnimationFrame pour des animations 60fps
  function tick(maintenant) {
    const progression = Math.min((maintenant - debut) / dureeMs, 1);
    // Easing easeInOut pour un mouvement naturel
    const ease = progression < 0.5
      ? 2 * progression * progression
      : 1 - Math.pow(-2 * progression + 2, 2) / 2;
    el.style.width = (depart + delta * ease) + 'px';
    if (progression < 1) requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
}
// Exemple : élargir la barre de progression à 500px en 600ms
animerLargeur('barre-progres', 500, 600);

  📋 Copier le code

/**
 * Vérifie si un élément est visible pour l'utilisateur.
 * Combine display, visibility et opacity pour une détection robuste.
 * @param {string} id - Identifiant de l'élément
 * @returns {boolean}
 */
function estVisible(id) {
  const el = document.getElementById(id);
  if (!el) return false;
  const s = window.getComputedStyle(el);
  return s.display !== 'none'
    && s.visibility !== 'hidden'
    && s.visibility !== 'collapse'
    && parseFloat(s.opacity) > 0;
}
// Utilisation conditionnelle
if (estVisible('panneau-notifications')) {
  console.log('Le panneau est visible — on peut l\'animer.');
}

  📋 Copier le code

/* Dans votre CSS :
   :root { --breakpoint: "mobile"; }
   @media (min-width: 768px) { :root { --breakpoint: "tablet"; } }
   @media (min-width: 1024px) { :root { --breakpoint: "desktop"; } }
*/
function breakpointActif() {
  const valeur = window.getComputedStyle(document.documentElement)
    .getPropertyValue('--breakpoint')
    .trim()
    .replace(/['"]/g, ''); // Certains navigateurs incluent les guillemets
  return valeur; // "mobile" | "tablet" | "desktop"
}
console.log('Breakpoint actif :', breakpointActif());
// Mettre à jour au redimensionnement avec debounce
window.addEventListener('resize', () => {
  clearTimeout(window._bpTimer);
  window._bpTimer = setTimeout(() => {
    console.log('Nouveau breakpoint :', breakpointActif());
  }, 150);
});