只需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 相关文章推荐
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
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 动态随机生成验证码类代码
2010/04/09 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
javascript学习网址备忘
2007/05/29 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
python调用外部程序的实操步骤
2019/03/04 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
python读取Kafka实例
2019/12/23 Python
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
亲子读书活动方案
2014/02/22 职场文书
新年团拜会主持词
2014/04/02 职场文书
大学生社会实践评语
2014/04/25 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
任命书模板
2014/06/04 职场文书
公司经理任命书
2014/06/05 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL