JavaScript のみを使用して、どの CSS ルールが特定の要素に影響を与えるかを判断するにはどうすればよいですか?

JavaScript の要素に影響する CSS ルールの決定

問題:

多くの Web 開発ツールは、次の要素に基づいて要素を選択する機能を提供しています。クラスまたはID。ただし、ブラウザーがロードする生の CSS スタイルシートを検査することで、ブラウザーのレンダリング プロセスをさらに詳しく調べることができます。 CSS ルールはコンパイルされ、複数のスタイルシートの要素に適用され、複雑な継承ツリーが作成されます。

質問:

この機能を、依存せずに純粋な JavaScript で複製するにはどうすればよいですか?追加のブラウザplugins?

例:

次のような特定の要素の場合:

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

<p></p>

p#description 要素は次のとおりです。 2 つの CSS ルールの影響を受けます: 赤色とフォント サイズ20px.

答え:

機能:

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;
}

使用法:

calling css(document.getElementById('elementId')) 

この関数は、それぞれを含む配列を返します。渡された要素と一致する CSS ルール。

以上がJavaScript のみを使用して、どの CSS ルールが特定の要素に影響を与えるかを判断するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。