Wie kann ich CSS-Eigenschaftswerte in ihren Originaleinheiten abrufen?

CSS-Eigenschaftswerte in ihren ursprünglichen Einheiten abrufen

Bei der Bestimmung des CSS-Eigenschaftswerts eines Elements verlassen sich Entwickler häufig auf Methoden wie getComputedStyle oder css() von jQuery. Allerdings geben diese Methoden den Wert in Pixeln zurück, was problematisch sein kann, wenn der Wert ursprünglich in anderen Einheiten (z. B. Prozent, em oder px) festgelegt wurde. Dies wirft die Frage auf: Wie können wir den CSS-Eigenschaftswert in seiner ursprünglichen Einheit erhalten, unabhängig davon, mit welchen Einheiten er festgelegt wurde?

Die Bedeutung von Elementstilen und -reihenfolge

Der Schlüssel liegt darin unter Berücksichtigung von Elementstilen und der Reihenfolge der CSS-Selektoren. Elementstile haben die höchste Priorität, daher prüfen wir zunächst, ob der Wert explizit in der Stileigenschaft des Elements festgelegt ist. Wenn ja, rufen wir den Wert und seine Priorität ab.

Als nächstes untersuchen wir die übereinstimmenden CSS-Regeln mit getMatchedCSSRules. Diese Regeln sind nach Priorität geordnet (höchste zuletzt) ​​und wir durchlaufen sie rückwärts. Wenn eine Regel eine Priorität ungleich Null hat, aktualisieren wir den Wert. Wenn eine Regel jedoch eine wichtige Priorität hat, geben wir den Wert sofort zurück.

Codebeispiel

Berücksichtigen Sie das folgende HTML und CSS:

<div class="b">div 1</div>
<div>
<p>Und das folgende JavaScript Code:</p>
<pre class="brush:php;toolbar:false">var d = document.querySelectorAll('div');

for (var i = 0; i <p>Dieser Code gibt die folgenden Breiten für aus divs:</p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

Fazit

Durch die Berücksichtigung sowohl der Elementstile als auch der Reihenfolge der übereinstimmenden CSS-Regeln ruft diese benutzerdefinierte getMatchedStyle-Funktion CSS-Eigenschaftswerte genau in ihren ursprünglichen Einheiten ab. Dieses Wissen ist für die präzise Verwaltung der Elementgröße und -abmessungen von entscheidender Bedeutung.