Pure JavaScript を使用して CSS 継承ツリーを検査するにはどうすればよいですか?

JavaScript での CSS 継承ツリーの検査

Web 開発では、CSS ルールが Web ページ上の要素にどのように適用されるかを理解することが不可欠です。ブラウザ ツールはこの継承ツリーに関する洞察を提供しますが、純粋な JavaScript を使用してこの分析を再現できますか?

CSS 継承を再現する必要性

ブラウザはさまざまなソースから CSS ルールをコンパイルし、要素に適用します。これにより、各要素の外観とレイアウトを定義する包括的なカスケードが作成されます。この継承ツリーの検査は、Web ページの視覚的な動作を理解するために非常に重要です。

純粋な JavaScript でのソリューション

プラグインを使用せずに純粋な JavaScript でこの機能を実装するには、技術的な課題が生じます。ただし、妥当な近似を提供するブラウザ間互換のソリューションを次に示します。

function css(el) {
    var sheets = document.styleSheets, ret = [];
    el.matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector 
        || el.msMatchesSelector || el.oMatchesSelector;
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (el.matches(rules[r].selectorText)) {
                ret.push(rules[r].cssText);
            }
        }
    }
    return ret;
}

この関数は、要素を入力として受け入れ、その要素に適用される CSS ルールを含む配列を返します。配列内の各要素は、特定のルールを表します。

使用例

関数を示すために、次の HTML と CSS を考慮してください。

<style type="text/css">
    p {
        color :red;
    }
    #description {
        font-size: 20px;
    }
</style>

<p></p>

この例では、 ID が「description」の要素には、赤色と 20 ピクセルのフォント サイズという 2 つの CSS ルールが適用されています。 css(document.getElementById('description')) を呼び出すと、2 つの CSS ルール文字列を含む配列が返されます。

さらなる分析

各ルールの詳細については、CSSRule を参照してください。オブジェクトのドキュメント。

以上がPure JavaScript を使用して CSS 継承ツリーを検査するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。