只需20行代碼就可以寫出CSS覆蓋率測試腳本
document.styleSheets里保存了當前頁面上所有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里回車即可。
當然由于權(quán)限問題，外部導(dǎo)入的CSS無論如何都訪問不到，暫時先不考慮了。至于不支持styleSheets的破IE嘛，可以考慮用expression或者behaviour.htc，改天試試看。
順便貼個測試結(jié)果：
相關(guān)文章
這篇文章主要是對javascript列表框操作函數(shù)進行了詳細的匯總介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要為大家詳細介紹了JavaScript的深拷貝與淺拷貝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
JavaScript初級教程(第四課)...2007-04-04
這篇文章主要介紹了JavaScript DOM進階,需要的朋友可以參考下2015-04-04
下面小編就為大家?guī)硪黄钊肜斫膺壿嫳磉_式的用法 與或非的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
2016年推出微信小程序，時至今日，歷經(jīng)幾個版本的更新，已形成了相對實用和穩(wěn)定的服務(wù)平臺。本文簡單的介紹了微信小程序的入門用法，今后會繼續(xù)關(guān)注和實踐。需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-03-03
使用HTML+CSS+JS制作簡單的網(wǎng)頁菜單界面
這篇文章主要介紹了使用HTML+CSS+JS制作簡單的網(wǎng)頁菜單界面,這個ABROAD項目所使用的JavaScript部分代碼非常簡單,需要的朋友可以參考下2015-07-07
javascript內(nèi)置對象arguments詳解
這篇文章主要介紹了javascript內(nèi)置對象arguments,實例講解arguments是什么怎么用,需要的朋友可以參考下2014-03-03
說說掌握JavaScript語言的思想前提想學(xué)習(xí)js的朋友可以看看
無論是公司的同事還是外界的程序員朋友們，大部分人對JavaScript的高級應(yīng)用不甚了解，已有的知識架構(gòu)里會認為JavaScript僅僅是一門腳本語言，其作用是給頁面做一些錦上添花的效果，比如表單驗證等等。2009-04-04
長時間不適用javascript,就連其中的不等于的代碼都不知道怎么寫了，下面為大家簡單介紹下，感興趣的朋友不要錯過2013-12-12