要素の最初に定義された 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 は、設定されている CSS プロパティ値を正確に返します。 stylesheet.

使用例

以下のHTMLとCSSを考えてみましょうコード:

<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 中国語 Web サイトの他の関連記事を参照してください。