JavaScript の要素に適用可能な CSS ルールをプログラムで取得するにはどうすればよいですか?

要素に適用可能な CSS ルールの取得

概要:
Web ブラウザは、さまざまなスタイルシートから CSS スタイルを適用します。それらをレンダリングする要素。 Firebug などのツールはこの情報を公開し、各要素の CSS 継承ツリーを表示します。この記事では、ブラウザ プラグインを使用せずに純粋な JavaScript でこの機能を複製する方法について説明します。

解決策:
要素に適用される CSS ルールを決定するには:

1. ドキュメントのスタイルシートを取得します: に関連付けられたスタイルシートの配列にアクセスします。 document.
2. CSS ルールの反復: 各スタイルシートとそのルールをループします。
3. 適用性のチェック:matches() メソッドを使用します。要素が CSS ルールのセレクター テキストと一致するかどうかを判断します。
4. キャプチャ適用可能ルール: 一致が見つかった場合は、CSS テキストを配列にプッシュします。

このソリューションを実装するサンプル JavaScript コードは次のとおりです:

function css(el) {
    var sheets = document.styleSheets;
    var 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(document.getElementById('elementId')) を呼び出します。適用された CSS ルールを文字列として含む配列が返されます。

例:

このサンプル HTML と CSS について考えてみましょう:

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

<p>

呼び出しcss(document.getElementById('description')) は 2 つの配列を生成します。 elements:

["p { color: red; }", "#description { font-size: 20px; }"]

この関数は、純粋な JavaScript の任意の要素に適用可能な CSS ルールを取得するための、簡単でブラウザー間互換性のあるアプローチを提供します。

以上がJavaScript の要素に適用可能な CSS ルールをプログラムで取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。