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