Comment puis-je récupérer les valeurs des propriétés CSS avec leurs unités d'origine en JavaScript ?

Récupération des valeurs de propriété CSS dans leurs unités spécifiées

Dans le développement Web, il peut être essentiel de récupérer les valeurs de propriété CSS telles qu'elles ont été définies à l'origine. , en conservant leurs unités spécifiées. Bien que getComputedStyle et la méthode css() de jQuery fournissent des valeurs en pixels, il existe des scénarios dans lesquels l'obtention de la valeur CSS brute est cruciale. Voici comment y parvenir dans Google Chrome sans avoir recours à des frameworks :

L'inspecteur élémentaire de Chrome

L'inspecteur d'éléments de Chrome offre une fonctionnalité précieuse : la possibilité d'afficher les valeurs des propriétés CSS. telles qu'elles ont été définies, fournissant un repère visuel pour la valeur souhaitée. Cela suggère que Chrome a la capacité de récupérer ces informations par programme.

Fonction getMatchedStyle

Pour y parvenir dans le code, nous utilisons la méthode getMatchedCSSRules() pour obtenir des règles correspondantes. , que nous parcourons ensuite dans l'ordre de priorité inverse. Nous donnons la priorité aux styles d’éléments par rapport aux règles externes et vérifions les propriétés importantes. La fonction getMatchedStyle ressemble à ceci :

function getMatchedStyle(elem, property){
    // Element style has highest priority
    var val = elem.style.getPropertyValue(property);

    // Stop if important
    if(elem.style.getPropertyPriority(property))
        return val;

    // Get matched rules
    var rules = getMatchedCSSRules(elem);

    // Iterate rules backwards, prioritizing highest priority
    for(var i = rules.length; i --> 0;){
        var r = rules[i];

        var important = r.style.getPropertyPriority(property);

        // Reset if more important or not yet set
        if(val == null || important){
            val = r.style.getPropertyValue(property);

            // Stop if important
            if(important)
                break;
        }
    }

    return val;
}

Exemple

Considérez le HTML et le CSS suivants :

<div class="b">div 1</div>
<div>
<pre class="brush:php;toolbar:false">div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%;   }
div#c.c  { width: 444px; }
x, div.a { width: 50%;   }
.a       { width: 75%;   }

Avec le étant donné le code, les largeurs suivantes sont récupérées :

div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

Cela met en évidence la possibilité de récupérer la propriété CSS valeurs dans leurs unités spécifiées, offrant une plus grande flexibilité et précision dans les tâches de manipulation de style basées sur des scripts.