Wie kann ich CSS-Eigenschaftswerte mit ihren ursprünglichen Einheiten in JavaScript abrufen?

CSS-Eigenschaftswerte in ihren angegebenen Einheiten abrufen

Bei der Webentwicklung kann es wichtig sein, CSS-Eigenschaftswerte so abzurufen, wie sie ursprünglich definiert wurden , wobei ihre angegebenen Einheiten beibehalten werden. Während getComputedStyle und die css()-Methode von jQuery Werte in Pixeln bereitstellen, gibt es Szenarien, in denen es entscheidend ist, den rohen CSS-Wert zu erhalten. So können Sie dies in Google Chrome erreichen, ohne auf Frameworks angewiesen zu sein:

Der Elementinspektor von Chrome

Der Elementinspektor von Chrome bietet eine wertvolle Funktion: die Möglichkeit, CSS-Eigenschaftswerte anzuzeigen wie sie eingestellt wurden, und geben so einen visuellen Hinweis auf den beabsichtigten Wert. Dies deutet darauf hin, dass Chrome in der Lage ist, diese Informationen programmgesteuert abzurufen.

getMatchedStyle-Funktion

Um dies im Code zu erreichen, verwenden wir die Methode getMatchedCSSRules(), um übereinstimmende Regeln zu erhalten , die wir dann in umgekehrter Reihenfolge der Priorität durchlaufen. Wir priorisieren Elementstile gegenüber externen Regeln und prüfen auf wichtige Eigenschaften. Die getMatchedStyle-Funktion sieht folgendermaßen aus:

function getMatchedStyle(elem, property){
    // Element style has highest priority
    var val = elem.style.getPropertyValue(property);

    // Stop if important
    if(elem.style.getPropertyPriority(property))
        return val;

    // Get matched rules
    var rules = getMatchedCSSRules(elem);

    // Iterate rules backwards, prioritizing highest priority
    for(var i = rules.length; i --> 0;){
        var r = rules[i];

        var important = r.style.getPropertyPriority(property);

        // Reset if more important or not yet set
        if(val == null || important){
            val = r.style.getPropertyValue(property);

            // Stop if important
            if(important)
                break;
        }
    }

    return val;
}

Beispiel

Berücksichtigen Sie das folgende HTML und CSS:

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

Mit dem Bei gegebenem Code werden die folgenden Breiten abgerufen:

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

Dies unterstreicht die Möglichkeit, CSS-Eigenschaften abzurufen Werte in ihren angegebenen Einheiten, was eine größere Flexibilität und Präzision bei skriptbasierten Stilmanipulationsaufgaben bietet.