Comment puis-je récupérer les valeurs de propriété CSS initialement définies (y compris le pourcentage et les unités EM) ?

Obtenir les valeurs des propriétés CSS telles que définies initialement (Pourcentage/EM/PX)

Dans le développement Web, il peut être crucial de récupérer l'original Valeur de la propriété CSS d'un élément, quelles que soient les modifications ultérieures. Cela est particulièrement vrai lorsque vous travaillez avec des unités telles que pourcentage ou em, car les valeurs calculées fournissent souvent des valeurs px à la place.

Définition du problème

Le problème survient lors de l'utilisation de fonctions telles que getComputedStyle ou css() de jQuery pour obtenir la valeur actuelle de la propriété CSS. Ces méthodes renvoient la valeur en pixels, même si elle est initialement définie dans d'autres unités.

Solution : getMatchedStyle

Pour résoudre ce problème, une fonction JavaScript personnalisée appelée getMatchedStyle peut être employé. Cette fonction parcourt les règles CSS de l'élément, en donnant la priorité aux styles d'élément et aux règles importantes. Il renvoie ensuite la valeur initiale telle que définie dans les règles CSS.

Exemple de code

function getMatchedStyle(elem, property) {
  // Check for element-defined property (highest priority)
  var val = elem.style.getPropertyValue(property);

  // If important, return immediately
  if (elem.style.getPropertyPriority(property)) return val;

  // Get matched CSS rules in descending priority order
  var rules = getMatchedCSSRules(elem);

  // Iterate through rules backwards to ensure correct priority
  for (var i = rules.length; i--;) {
    var r = rules[i];

    // Check if rule is important
    var important = r.style.getPropertyPriority(property);

    // Update value only if not set or if important rule encountered
    if (val == null || important) {
      val = r.style.getPropertyValue(property);

      // Return if important rule encountered
      if (important) break;
    }
  }

  return val;
}

Exemple d'utilisation

Considérez le code HTML et CSS suivant :

<div class="b">first</div>
<div>
<p>Le code JavaScript suivant peut être utilisé pour récupérer les largeurs initiales du divs:</p>
<pre class="brush:php;toolbar:false">var d = document.querySelectorAll('div');

for (var i = 0; i <p><strong>Output</strong></p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%

En utilisant la fonction getMatchedStyle, nous pouvons récupérer avec précision les valeurs des propriétés CSS telles que définies à l'origine, qu'elles soient ou non modifié par les styles ultérieurs.