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>

Der folgende JavaScript-Code verwendet getMatchedStyle(), um die Breitenwerte für zu erhalten divs:

var d = document.querySelectorAll('div');

for (var i = 0; i < d.length; ++i) {
  console.log("div " + (i + 1) + ":  " + getMatchedStyle(d[i], 'width'));
}

Ergebnisse:

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

Das obige ist der detaillierte Inhalt vonWie kann ich den genauen CSS-Eigenschaftswert (einschließlich Einheiten) eines Elements in JavaScript erhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!