Comment puis-je obtenir la valeur exacte de la propriété CSS (y compris les unités) d'un élément en JavaScript ?

Obtenir la valeur de la propriété CSS de l'élément telle que définie (Pourcentage/Em/Px)

Obtenir la valeur de la propriété CSS d'un élément comme spécifié dans le les règles de style peuvent être difficiles, surtout lorsque la propriété a été divisée en plusieurs unités. Dans Google Chrome, la méthode getComputedStyle() et la méthode css() de jQuery renvoient toutes deux la valeur actuelle en pixels.

Solution : fonction getMatchedStyle

Pour résoudre ce problème, une fonction JavaScript appelée getMatchedStyle() a été développée. Il prend un élément et une propriété comme arguments et renvoie la valeur telle qu'elle a été définie dans les règles CSS.

function getMatchedStyle(elem, property) {
  // Check element's own style first
  var val = elem.style.getPropertyValue(property);
  if (elem.style.getPropertyPriority(property)) return val;

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

  // Iterate rules in reverse order of priority
  for (var i = rules.length; i--;) {
    var r = rules[i];
    var important = r.style.getPropertyPriority(property);

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

  return val;
}

Exemple

Considérez le code HTML suivant avec Règles CSS :

<div class="b">div 1</div>
<div>
<p>Le code JavaScript suivant utilise getMatchedStyle() pour obtenir les valeurs de largeur du divs :</p>
<pre class="brush:php;toolbar:false">var d = document.querySelectorAll('div');

for (var i = 0; i <p><strong>Résultats :</strong></p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em