只需20行代码就可以写出CSS覆盖率测试脚本


Posted in Javascript onApril 24, 2013

document.styleSheets里保存了当前页面上所有CSS规则的集合。通过它可以遍历出页面<style>里定义的所有selector,访问selectorText属性可得选择器的匹配规则。然后将规则规则传递给 document.querySelectorAll 即可获取页面内匹配此规则的元素列表。

这里我们只求CSS规则的覆盖率,所以访问 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匹配数:" + usage[i].count);
}

 

呼出F12,把代码粘到console里回车即可。

当然由于权限问题,外部导入的CSS无论如何都访问不到,暂时先不考虑了。至于不支持styleSheets的破IE嘛,可以考虑用expression或者behaviour.htc,改天试试看。

顺便贴个测试结果:

只需20行代码就可以写出CSS覆盖率测试脚本

Javascript 相关文章推荐
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
js Array对象的扩展函数代码
Apr 24 #Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 #Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 #Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 #Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 #Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 #Javascript
查看图片(前进后退)功能实现js代码
Apr 24 #Javascript
You might like
php延迟静态绑定实例分析
2015/02/08 PHP
PHP二维数组去重算法
2016/12/17 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
TensorFlow Session使用的两种方法小结
2018/07/30 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
一文读懂Python 枚举
2020/08/25 Python
.net开发工程师面试题
2014/02/25 面试题
应届生.NET方向面试题
2015/05/23 面试题
总裁秘书岗位职责
2013/12/04 职场文书
运动会领导邀请函
2014/01/10 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
食品安全演讲稿
2014/09/01 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
2015年团支书工作总结
2015/04/03 职场文书
丧事答谢词大全
2015/09/30 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL