首頁 > web前端 > js教程 > 只需20行程式碼就可以寫出CSS覆蓋率測試腳本_基礎知識

只需20行程式碼就可以寫出CSS覆蓋率測試腳本_基礎知識

WBOY
發布: 2016-05-16 17:35:31
原創
975 人瀏覽過

  document.styleSheets裡保存了目前頁面上所有CSS規則的集合。透過它可以遍歷出頁面

  這裡我們只求CSS規則的覆蓋率,所以造訪 querySelectorAll().length 即可。透過排序就可看出各個CSS使用情況。

  程式碼很簡單。

複製程式碼 程式碼如下:

var usage = [];

var usage = [];
var sheets = document.styleSheets;

for(var i = sheets.length - 1; i != -1; i--) {
    var rules = sheets[i].rules;

  .length - 1; j != -1; j--) {
        var rule = rules[j];
       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 "nt符合數:" usage [i].count);
}


 

  呼出F12,把程式碼黏到console裡回車即可。

  當然由於權限問題,外部導入的CSS無論如何都訪問不到,暫時先不考慮了。至於不支援styleSheets的破IE嘛,可以考慮用expression或是behaviour.htc,改天試試看。

  順便貼個測試結果:

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板