わずか20行のコードでCSSカバレッジテストスクリプトが書ける_基礎知識

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

ここでは CSS ルールの範囲のみが必要なので、querySelectorAll().length にアクセスするだけです。並べ替えることで、各 CSS の使用状況がわかります。

コードは非常に簡単です。

コードをコピー コードは次のとおりです: var use = []; varsheets = 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 rules = rules[j]; var text = rules.selectorText;

use.push({name:テキスト、カウント: document.querySelectorAll(text).length}); } } usage.sort(function(a, b){return a.count - b.count});

for(var i = use.length - 1; i != -1; i--) { console.log("セレクター: " use[i].name "nt 一致する番号: " use [ i].count); }

F12 を吐き出し、コードをコンソールに貼り付けて Enter を押します。

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

ちなみに、テスト結果を投稿してください: