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.
Berücksichtigen Sie das folgende HTML und CSS Code:
<div class="b">div 1</div> <div>
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 < d.length; ++i){ console.log("div " + (i+1) + ": " + getMatchedStyle(d[i], 'width')); }
gibt Folgendes aus:
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.
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!