Wie kann ich die ursprünglich definierten CSS-Eigenschaftswerte eines Elements effizient abrufen?

Extrahieren der CSS-Eigenschaftswerte eines Elements als Satz

Wenn Sie die CSS-Eigenschaftswerte eines Elements so abrufen müssen, wie sie ursprünglich definiert wurden, bietet die Funktion getMatchedStyle eine Lösung. Diese Funktion durchläuft die übereinstimmenden CSS-Regeln in absteigender Prioritätsreihenfolge und berücksichtigt dabei sowohl Elementstile als auch Eigenschaftswichtigkeit.

function getMatchedStyle(elem, property){
    var val = elem.style.getPropertyValue(property);
    if(elem.style.getPropertyPriority(property))
        return val;
    var rules = getMatchedCSSRules(elem);
    for(var i = rules.length; i--;){
        var important = r.style.getPropertyPriority(property);
        if(val == null || important){
            val = r.style.getPropertyValue(property);
            if(important)
                break;
        }
    }
    return val;
}

Unter Berücksichtigung der Eigenschaftswichtigkeit und Elementstile gibt getMatchedStyle den CSS-Eigenschaftswert genau zurück, wie er in festgelegt ist Stylesheet.

Verwendungsbeispiel

Berücksichtigen Sie das folgende HTML und CSS Code:

<div class="b">div 1</div>
<div>
<pre class="brush:php;toolbar:false">div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%; }
div#c.c  { width: 444px; }
x, div.a { width: 50%; }
.a       { width: 75%; }

Das Ausführen des folgenden JavaScript-Codes:

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

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

Dies demonstriert die Fähigkeit der Funktion, das genau zu extrahieren Legen Sie die CSS-Breitenwerte der Elemente fest.