Wie kann ich den genauen CSS-Eigenschaftswert (einschließlich Einheiten) eines Elements in JavaScript erhalten?

Element-CSS-Eigenschaftswert als Satz abrufen (Prozent/Em/Px)

Erhalten des CSS-Eigenschaftswerts eines Elements wie in angegeben Stilregeln können eine Herausforderung darstellen, insbesondere wenn die Immobilie in verschiedene Einheiten unterteilt ist. In Google Chrome geben die getComputedStyle()-Methode und die css()-Methode von jQuery beide den aktuellen Wert in Pixeln zurück.

Lösung: getMatchedStyle-Funktion

Um dieses Problem zu beheben, Es wurde eine JavaScript-Funktion namens getMatchedStyle() entwickelt. Es akzeptiert ein Element und eine Eigenschaft als Argumente und gibt den Wert zurück, wie er in den CSS-Regeln festgelegt wurde.

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;
}

Beispiel

Betrachten Sie den folgenden HTML-Code mit CSS-Regeln:

<div class="b">div 1</div>
<div>
<p>Der folgende JavaScript-Code verwendet getMatchedStyle(), um die Breitenwerte für zu erhalten divs:</p>
<pre class="brush:php;toolbar:false">var d = document.querySelectorAll('div');

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