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

JavaScript での要素固有の CSS ルールの検索

Web 開発では、要素に適用される CSS ルールを理解することが微調整に重要ですその姿と振る舞い。 Firebug や WebKit Inspector などの開発者ツールを利用すると、要素のレンダリングに影響を与えるコンパイルされた CSS ルールについての洞察が得られます。ただし、追加のプラグインを使用せずに純粋な JavaScript でこの機能を複製するには、課題が生じます。

この課題に対処するために、このタスクを実現する JavaScript 関数を詳しく調べてみましょう。 css という名前にふさわしいこの関数は、HTML 要素を入力として受け取り、それに適用される CSS ルールの配列を返します。

css 関数は、ブラウザー間の互換性をサポートするmatches メソッドを利用します。ドキュメント内のスタイルシートを反復処理し、それらのスタイルシート内の各 CSS ルールを検査します。要素のセレクターがルールの selectorText と一致する場合、そのルールの CSS テキストが配列に追加されます。

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

呼び出しcss(document.getElementById('description')) は、次の 2 つの CSS ルールを含む配列を返します:

この配列を分析することで、開発者は要素に影響を与える特定の CSS プロパティのソースを特定し、それに応じて調整します。 JSFiddle (http://jsfiddle.net/HP326/6/) で利用可能な css 関数は、純粋な JavaScript で要素の外観を形成する CSS ルールを特定するための包括的なソリューションを提供し、開発者が独自のアプリケーションでブラウザーのレンダリング機能を活用できるようにします。 .

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