如何有效率地檢索元素最初定義的 CSS 屬性值？

提取元素的 CSS 屬性值作為 Set

當需要取得元素最初定義的 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>
<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%; }

執行下列JavaScript 程式碼：

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

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

這示範了該函數準確提取設定元素的CSS寬度值。