當需要取得元素最初定義的 CSS 屬性值時，函數 getMatchedStyle 提供了一個解決方案。函數依照優先權降序迭代相符的 CSS 規則，同時考慮元素樣式和屬性重要性。
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;
}考慮屬性重要性和元素樣式，getMatchedStyle 精確地傳回在樣式表。
考慮以下HTML 和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%; }執行下列JavaScript 程式碼：
var d = document.querySelectorAll('div');
for(var i = 0; i < d.length; ++i){
console.log("div " + (i+1) + ": " + getMatchedStyle(d[i], 'width'));
}將輸出：>將輸出：
div 1: 100px div 2: 50% div 3: auto div 4: 44em
這示範了該函數準確提取設定元素的CSS寬度值。
以上是如何有效率地檢索元素最初定義的 CSS 屬性值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
