如何高效地检索元素最初定义的 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>

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中文网其他相关文章！