Récupérer et manipuler les valeurs CSS en JavaScript

Introduction à l'accès aux propriétés CSS en JavaScript

La manipulation des styles CSS via JavaScript est une compétence essentielle pour créer des interfaces web dynamiques et interactives. Dans ce guide complet, nous explorerons les différentes méthodes pour récupérer, modifier et travailler avec les valeurs CSS en JavaScript.

Les deux approches principales pour accéder aux styles CSS

En JavaScript, il existe principalement deux façons d'accéder aux propriétés CSS d'un élément :

• getComputedStyle() : Pour accéder à tous les styles calculés (y compris ceux des feuilles de style)
• element.style : Pour accéder uniquement aux styles inline définis directement sur l'élément

Méthode 1 : Utiliser getComputedStyle() pour accéder aux styles calculés

La méthode window.getComputedStyle() est l'approche la plus complète pour récupérer les valeurs CSS, car elle prend en compte tous les styles appliqués à un élément, y compris ceux définis dans les feuilles de style externes.

Exemple code javascript         📋 Copier le code

// Récupère l'élément dont vous souhaitez récupérer la propriété CSS
var element = document.querySelector('#mon-element');

// Récupère les styles calculés pour cet élément
var styles = window.getComputedStyle(element);

// Récupère la valeur de la propriété CSS souhaitée
var value = styles.getPropertyValue('ma-propriete-css');

// Alternative avec notation par points (pour les propriétés en camelCase)
var valueAlt = styles.maProprieteCss;

Exemple pratique : Récupérer la couleur d'arrière-plan

Exemple     📋 Copier le code

// Récupérer un élément par son ID
var monElement = document.getElementById('mon-element');

// Obtenir tous les styles calculés
var styles = window.getComputedStyle(monElement);

// Récupérer la couleur d'arrière-plan
var bgColor = styles.backgroundColor;

// Afficher la valeur dans la console
console.log('Couleur de fond:', bgColor);
// Résultat possible: rgb(255, 255, 255) ou #ffffff selon le navigateur

Méthode 2 : Utiliser element.style pour les styles inline

La méthode element.style permet d'accéder uniquement aux styles définis directement sur l'élément via l'attribut style. Cette approche est plus limitée mais peut être utile dans certains cas spécifiques.

Exemple     📋 Copier le code

// Récupère l'élément dont vous souhaitez récupérer la propriété CSS
var element = document.querySelector('#mon-element');

// Récupère la valeur de la propriété CSS souhaitée
var value = element.style.maProprieteCss;

// Pour les propriétés avec tirets, utilisez la notation camelCase
var width = element.style.width; // Au lieu de element.style['width']

Limitations de element.style

Il est important de noter que element.style ne renverra que les styles définis directement sur l'élément. Les styles provenant de feuilles de style externes ou de règles CSS ne seront pas accessibles via cette méthode.

Conversion des valeurs CSS en nombres

Les valeurs CSS sont toujours renvoyées sous forme de chaînes de caractères, y compris les valeurs numériques avec leurs unités (px, em, %, etc.). Pour effectuer des calculs, vous devez souvent convertir ces valeurs en nombres.

Utilisation de parseInt() pour les valeurs entières

La fonction parseInt() convertit une chaîne de caractères en nombre entier, ce qui est utile pour les propriétés comme z-index ou border-width.

Exemple     📋 Copier le code

// Récupérer un élément
var element = document.querySelector('.ma-classe');

// Obtenir les styles calculés
var styles = window.getComputedStyle(element);

// Récupérer la valeur de la propriété width (ex: "300px")
var widthStr = styles.width;

// Convertir en nombre entier (ex: 300)
var widthNum = parseInt(widthStr);

// Afficher le résultat
console.log('Largeur en pixels:', widthNum);

Utilisation de parseFloat() pour les valeurs décimales

Pour les propriétés qui peuvent avoir des valeurs décimales comme opacity ou font-size, utilisez parseFloat().

Exemple     📋 Copier le code

// Récupérer un élément
var element = document.querySelector('.ma-classe');

// Obtenir les styles calculés
var styles = window.getComputedStyle(element);

// Récupérer la valeur de l'opacité (ex: "0.75")
var opacityStr = styles.opacity;

// Convertir en nombre à virgule flottante (ex: 0.75)
var opacityNum = parseFloat(opacityStr);

// Afficher le résultat
console.log('Opacité:', opacityNum);

Gestion des unités CSS

Lorsque vous utilisez parseInt() ou parseFloat(), JavaScript ignore automatiquement les unités (px, em, rem, %, etc.) et ne conserve que la valeur numérique. C'est pratique, mais attention aux conversions entre différentes unités.

Exemple     📋 Copier le code

// Fonction pour extraire la valeur numérique et l'unité d'une propriété CSS
function extractValueAndUnit(cssValue) {
    // Utiliser une expression régulière pour séparer la valeur et l'unité
    var match = cssValue.match(/^(-?\d*\.?\d+)(\D+)$/);
    
    if (match) {
        return {
            value: parseFloat(match[1]),
            unit: match[2]
        };
    }
    
    return null;
}

// Exemple d'utilisation
var element = document.querySelector('.ma-classe');
var styles = window.getComputedStyle(element);
var fontSize = styles.fontSize; // ex: "16px"

var parsed = extractValueAndUnit(fontSize);
console.log('Valeur:', parsed.value); // 16
console.log('Unité:', parsed.unit);   // "px"

Travailler avec les variables CSS (propriétés personnalisées)

Les variables CSS (également appelées propriétés personnalisées) sont de plus en plus utilisées dans les feuilles de style modernes. Voici comment y accéder en JavaScript.

Exemple     📋 Copier le code

// Récupérer un élément
var element = document.querySelector('.ma-classe');

// Obtenir les styles calculés
var styles = window.getComputedStyle(element);

// Récupérer la valeur d'une variable CSS
// Note: les variables CSS doivent être préfixées par deux tirets
var primaryColor = styles.getPropertyValue('--primary-color');
console.log('Couleur primaire:', primaryColor);

// Pour modifier une variable CSS
element.style.setProperty('--primary-color', '#ff0000');

Compatibilité entre navigateurs

La méthode getComputedStyle() est supportée par tous les navigateurs modernes, mais il existe quelques différences dans l'implémentation :

• Format des couleurs : Certains navigateurs renvoient les couleurs au format RGB, d'autres au format hexadécimal.
• Valeurs par défaut : Les valeurs par défaut peuvent varier légèrement entre navigateurs.
• Propriétés préfixées : Pour les propriétés avec préfixes vendeurs, utilisez la forme complète (ex: -webkit-transform).

Cas d'usage pratiques

1. Animation basée sur les styles actuels

Exemple     📋 Copier le code

// Animer un élément en modifiant progressivement sa largeur
function animateWidth(elementId, targetWidth) {
    var element = document.getElementById(elementId);
    var styles = window.getComputedStyle(element);
    var currentWidth = parseInt(styles.width);
    
    var increment = (targetWidth - currentWidth) / 20; // 20 étapes
    
    var step = 0;
    var interval = setInterval(function() {
        step++;
        currentWidth += increment;
        element.style.width = currentWidth + 'px';
        
        if (step >= 20) {
            clearInterval(interval);
            element.style.width = targetWidth + 'px';
        }
    }, 20);
}

// Utilisation: animateWidth('mon-element', 500);

2. Détection de la visibilité d'un élément

Exemple     📋 Copier le code

// Vérifier si un élément est visible
function isElementVisible(elementId) {
    var element = document.getElementById(elementId);
    var styles = window.getComputedStyle(element);
    
    return styles.display !== 'none' && 
           styles.visibility !== 'hidden' && 
           parseFloat(styles.opacity) > 0;
}

// Utilisation: if (isElementVisible('mon-element')) { /* Faire quelque chose */ }

Conclusion

La manipulation des valeurs CSS en JavaScript est une compétence puissante pour créer des interfaces web dynamiques. En maîtrisant getComputedStyle(), element.style et les techniques de conversion, vous pouvez créer des expériences utilisateur riches et interactives.

Pour aller plus loin, explorez les API modernes comme ResizeObserver pour détecter les changements de taille d'éléments, ou IntersectionObserver pour savoir quand un élément devient visible dans la vue.