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

要素に関連付けられたすべての CSS ルールを取得する

ブラウザのレンダリングには、CSS ルールをコンパイルし、特定の要素に適用することが含まれます。この階層プロセスは、Firebug などのブラウザ ツールで示されるように、要素の最終的な外観で最高潮に達します。ただし、追加のプラグインなしでこれらの計算された CSS ルールにアクセスするには、純粋な JavaScript でのカスタム ソリューションが必要です。

解決策:

要素の CSS ルールを取得するには、JavaScript のDOM API および CSSRule オブジェクト。次のコード スニペットは、ブラウザ間互換性のあるソリューションを提供します。

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 ルールを含む配列を返します。特定の要素のルールを取得するには、単に css(document.getElementById('elementId')) を呼び出します。

例:

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

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

<p>

電話中css(document.getElementById('description')) は、次の配列を返します:

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

この配列には、要素に適用される 2 つの CSS ルールがリストされ、要素の最終的な外観を明確に理解できます。

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