純粋な JavaScript の要素に影響を与えるすべての CSS ルールを取得するにはどうすればよいですか?

純粋な JavaScript の要素に影響するすべての CSS ルールの決定

Web 開発では、ブラウザーによって読み込まれた生のスタイルシートを検査すると、部分的な情報しか得られません。要素に適用される CSS ルールを理解する。これは、ブラウザがすべての CSS ルールをコンパイルし、継承に基づいて要素に適用するため、スタイルシートではすぐには分からない複雑な継承ツリーが生成されるためです。

この機能を再現するための純粋な JavaScript ソリューションを求める開発者向けには、追加のブラウザー プラグインに依存せずに、要素に影響を与える計算された CSS ルールに関する詳細情報を取得することは、大きな課題となります。ただし、包括的な解決策は次のとおりです。

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:

HTML

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

<p>

JavaScript

var rules = css(document.getElementById('description'));
console.log(rules); // ['color: red;', 'font-size: 20px;']

この例では、関数は 2 つの一致する CSS を識別します。ルール: すべての

に赤色を指定するルール:

返された配列により、CSSRule オブジェクトのドキュメントを参照して各ルールの詳細をさらに詳しく調べることができます。このアプローチは、追加のプラグインを必要とせずに、要素に適用される計算された CSS ルールを抽出する包括的でブラウザー互換の方法を提供し、開発者がスタイルを詳細に検査してデバッグできるようにします。

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