只需20行代碼就可以寫出CSS覆蓋率測試腳本
document.styleSheets里保存了當(dāng)前頁面上所有CSS規(guī)則的集合。通過它可以遍歷出頁面<style>里定義的所有selector，訪問selectorText屬性可得選擇器的匹配規(guī)則。然后將規(guī)則規(guī)則傳遞給 document.querySelectorAll 即可獲取頁面內(nèi)匹配此規(guī)則的元素列表。
這里我們只求CSS規(guī)則的覆蓋率，所以訪問 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匹配數(shù)：" + usage[i].count);
}
呼出F12，把代碼粘到console里回車即可。
當(dāng)然由于權(quán)限問題，外部導(dǎo)入的CSS無論如何都訪問不到，暫時先不考慮了。至于不支持styleSheets的破IE嘛，可以考慮用expression或者behaviour.htc，改天試試看。
順便貼個測試結(jié)果：
相關(guān)文章
下面小編就為大家?guī)硪黄P(guān)于JS 預(yù)解釋的相關(guān)理解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
Javascrip基礎(chǔ)之for循環(huán)和數(shù)組
這篇文章主要為大家介紹了Javascrip之for循環(huán)和數(shù)組，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
js獲取height和width屬性的值在日常開發(fā)中很常見，于是本人搜集整理了一下，感興趣的朋友可以參考下2013-01-01
這篇文章主要介紹了Redis基本知識、安裝、部署、配置筆記,本文講解了基本知識、安裝Redis、Redis的配置等知識,需要的朋友可以參考下2015-03-03
Function.prototype.apply()與Function.prototype.call()小結(jié)
JavaScript 中，某個函數(shù)的參數(shù)數(shù)量是不固定的，因此要說適用條件的話，當(dāng)你的參數(shù)是明確知道數(shù)量時，用 call，而不確定的時候，用 apply，然后把參數(shù) push 進(jìn)數(shù)組傳遞進(jìn)去。當(dāng)參數(shù)數(shù)量不確定時，函數(shù)內(nèi)部也可以通過 arguments 這個數(shù)組來便利所有的參數(shù)2016-04-04
歷史上的某一天是星期幾？未來的某一天是星期幾？關(guān)于這個問題，有很多計算公式,其中最著名的是蔡勒（Zeller）公式2012-12-12
在js開發(fā)應(yīng)用中我們通常會碰到“|”與“||”了，那么在運算中“|”與“||”是什么意思呢？本篇文章主要介紹了詳解js運算符單豎杠“|”與“||”的用法，有需要的可以了解一下。2016-11-11
Javascript 普通函數(shù)和構(gòu)造函數(shù)的區(qū)別
這篇文章主要介紹了Javascript 普通函數(shù)和構(gòu)造函數(shù)的區(qū)別的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了js實現(xiàn)圖片局部放大效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
短短20行代碼，就可以寫一個CSS覆蓋率測試腳本,需要的朋友參考下2013-04-04