Pure JavaScript を使用して要素に適用可能なすべての CSS ルールを取得するにはどうすればよいですか?

JavaScript を使用して要素に適用できる CSS ルールを見つける

Web 開発では、特定のクラスまたは ID の CSS 要素にアクセスするのが一般的なタスクです。多くの場合、ツールや API を利用します。ただし、ブラウザーは、要素の外観を決定するために、さまざまなソースから該当するすべての CSS ルールをコンパイルします。ブラウザのプラグインに依存せずに、純粋な JavaScript でこの機能を複製するにはどうすればよいでしょうか?

計算された CSS ルールの特定

次の HTML と CSS の例を考えてみましょう:

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

<p>

この場合、要素 p#description は 2 つの CSS ルールを継承します: 赤色とフォントサイズは20px。目標は、これらのルールの起源を特定することです。

JavaScript の実装

これを達成するには、次の JavaScript を使用できます。 function:

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

使用法

var rules = css(document.getElementById('elementId'));

ルール変数には、選択した要素に適用できるすべての CSS ルールの配列が含まれます。

注:

この関数はElement.matches() メソッド。これには、古いブラウザのクロスブラウザ互換性ポリフィルが必要です。ただし、追加のブラウザー プラグインを使用せずに CSS ルールを識別する迅速かつ効率的な方法が提供されます。

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