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