CSS カバレッジテストスクリプトを実装するコード

この記事では主に CSS カバレッジ テスト スクリプトを実装するためのコードを紹介します。これには特定の参考値があります。必要な友達はそれを参照してください。ここでは CSS ルールのカバレッジのみを求めますので、querySelectorAll にアクセスしてください。 ).長さは十分です。並べ替えることで、各 CSS の使用状況を確認できます

document.styleSheets は、現在のページ上のすべての CSS ルールのコレクションを保存します。これにより、ページ で定義されたすべてのセレクターをトラバースし、selectorText属性にアクセスしてセレクターの一致ルールを取得できます。次に、ルール ルールを document.querySelectorAll に渡して、このルールに一致するページ内の要素のリストを取得します。

ここでは CSS ルールの範囲のみが必要なので、querySelectorAll().length にアクセスするだけです。並べ替えることで、各 CSS の使用状況がわかります。 コードは非常にシンプルです。 var usage = []; var sheets = document.styleSheets; for(var i = sheets.length - 1; i != -1; i--) { var rules = sheets[i].rules;

for(var j = rules.length - 1; j != -1; j--) { var rule = rules[j]; var text = rule.selectorText;

usage.push({name: text, count: document.querySelectorAll(text).length}); } } usage.sort(function(a, b){return a.count - b.count}); for(var i = usage.length - 1; i != -1; i--) { console.log("选择器：" + usage[i].name + "\n\t匹配数：" + usage[i].count); } ログイン後にコピー F12 を呼び出し、コードをコンソールに貼り付けて Enter を押します。

もちろん、権限の問題により、外部からインポートされた CSS にはアクセスできないため、現時点では考慮しません。 styleSheets をサポートしていない壊れた IE については、expression または behaviour.htc の使用を検討し、別の日に試してください。

純粋な JS 実装は以上です。将来的には、ローカルプログラムと連携して外部CSSの解析を実装していきます。 ところで、テスト結果を投稿してください:

どの CSS が役に立たないのかは明らかです:

もちろん、0 件の CSS が役に立たないという意味ではありません。最も典型的な例は:hover で、これはマウスが上に移動された場合にのみ一致します。 className、[attr=]、#dynamic ID、動的要素によるコントロールもあります。 。 。 。などのスタイルは合わせにくいです。

つまり、上記のコードはあまり意味がありません。現在主流のブラウザにはプロファイル機能が組み込まれており、セレクターによって一致する要素の数をリアルタイムで追跡できるため、IE バージョンを作成するのは理にかなっています:)

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS カバレッジテストスクリプトを実装するコード

CSS カバレッジ テスト スクリプトを実装するコード

CSS カバレッジテストスクリプトを実装するコード