Wie kann ich die ursprünglich definierten CSS-Eigenschaftswerte (einschließlich Prozent- und EM-Einheiten) abrufen?

CSS-Eigenschaftswerte wie ursprünglich definiert abrufen (Prozent/EM/PX)

Bei der Webentwicklung kann es entscheidend sein, das Original abzurufen CSS-Eigenschaftswert eines Elements, unabhängig von späteren Änderungen. Dies gilt insbesondere beim Arbeiten mit Einheiten wie Prozent oder em, da berechnete Werte häufig stattdessen px-Werte liefern.

Problemdefinition

Das Problem tritt bei der Verwendung von Funktionen wie getComputedStyle auf oder css() von jQuery, um den aktuellen CSS-Eigenschaftswert zu erhalten. Diese Methoden geben den Wert in Pixeln zurück, auch wenn sie ursprünglich in anderen Einheiten festgelegt wurden.

Lösung: getMatchedStyle

Um dieses Problem zu beheben, kann eine benutzerdefinierte JavaScript-Funktion namens getMatchedStyle verwendet werden beschäftigt. Diese Funktion durchläuft die CSS-Regeln des Elements und priorisiert Elementstile und wichtige Regeln. Anschließend wird der in den CSS-Regeln definierte Anfangswert zurückgegeben.

Codebeispiel

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

Beispielverwendung

Betrachten Sie das folgende HTML und CSS:

<div class="b">first</div>
<div>
<p>Der folgende JavaScript-Code kann verwendet werden, um die anfänglichen Breiten von abzurufen die Divs:</p>
<pre class="brush:php;toolbar:false">var d = document.querySelectorAll('div');

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

Durch die Verwendung der getMatchedStyle-Funktion können wir die CSS-Eigenschaftswerte wie ursprünglich definiert genau abrufen, unabhängig davon, ob sie vorhanden sind wurden durch nachfolgende Stile verändert.