Heim > Web-Frontend > CSS-Tutorial > Wie kann ich die ursprünglich definierten CSS-Eigenschaftswerte eines Elements effizient abrufen?

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

Patricia Arquette
Freigeben: 2024-12-16 18:03:11
Original
412 Leute haben es durchsucht

How Can I Efficiently Retrieve an Element's Initially Defined CSS Property Values?

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;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren
div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%; }
div#c.c  { width: 444px; }
x, div.a { width: 50%; }
.a       { width: 75%; }
Nach dem Login kopieren

Das Ausführen des folgenden JavaScript-Codes:

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

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

gibt Folgendes aus:

div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em
Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonWie kann ich die ursprünglich definierten CSS-Eigenschaftswerte eines Elements effizient abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage