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覆盖率测试脚本的更多相关文章

  1. ios – 超时等待120秒的模拟器启动

    看起来像Teamcity代理(TC版本是9.0EAP)不能通过测试shell脚本运行iOS模拟器.我正在使用BuildStep:命令行,它运行自定义脚本并将参数传递给它.通过使用shell脚本../bin/mac.launchd.sh,在MacOSXYosemite10.10上启动了Teamcity代理.构建日志错误:我的shell脚本进行测试:我也试过从这个question的解决方案,但没有帮助

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

    短短20行代码,就可以写一个CSS覆盖率测试脚本,需要的朋友参考下

  3. windows – 如何在运行批处理文件时防止程序(.exe)失败的错误弹出消息框

    ..ClickonOKtoterminatetheprogramClickonCANCELtodebugtheprogram结果是已知的–脚本执行阻止,直到某人按下“确定”按钮.当我们谈论可能在某些无头虚拟机中自动运行的自动脚本时,可能会出现问题.有没有一种简单的方法来防止这种行为,只是让应用程序退出失败代码–而不更改程序本身的代码?当DLL丢失时,这并不能解决问题,但这种情况非常罕见,这对我来说已经足够了.

  4. windows – 如何打破某人进行测试?

    好.我们的产品有效.Beta测试人员实际上正在完成他们的工作.下一次迭代的时间.但如何保证质量?我们需要一个测试员!我如何让新鲜的人在街上开始测试?我不知道如何自己做!你为什么要找“街上的人”?对我来说,这听起来有点像“我想聘请一位新程序员,如何让某人离开街头让他加快编程我的软件?”.你为什么要这样做,而不是雇用一个已经是程序员的人呢?

  5. windows – Jenkins:运行远程测试脚本和报告结果

    你们所有人的指示?

  6. php-cli输出而不是执行

    我使用Debian测试,我已经安装PHP-cli,当我尝试执行一个PHP脚本时,输出源代码而不是执行它.例:任何想法如何解决这个问题,我尝试重新安装和清除没有结果.在PHP.ini文件中找到以下行:short_open_tag=关闭并将其更改为:short_open_tag=开

  7. php – 有人可以给我一些基本的XSS和sql注入脚本吗? (不是什么似乎)

    我正在测试我的脚本,看看他们是否会阻止xss和sql注入.有人可以为我提供一些基本但是很好的脚本,这些脚本会“骇客”到我的程序中.我想在我的脚本上线之前测试我的脚本.编辑:感谢所有这些链接,它们包含负载和负载信息.但是对于初学者来说,安全性是否有推荐的网站呢?

  8. 为什么使用PHPUnit比创建自己的测试脚本更好?

    PHPUnit有2MB的文件,其中包含大量的类.此外,PHPUnit只从命令行运行:(不创建我自己的脚本是一个更好的主意吗?PHPUnit是一个野兽.它很大,有时候反直觉,它有它的缺点.您的代码–自然–直观,完美无缺,满足您的直接要求.我也经常思考,如果编写自己的测试框架不是一个进步,但是……

  9. windows-server-2003 – 寻找在服务器上安装和配置SNMP的自动方法

    我有一个拥有30台Windows服务器的环境.我们现在正在研究监控解决方案,但我们需要首先考虑的是安装SNMP并配置每台服务器.我希望有一种方法可以让我们远程进行集中管理,所以如果我们以后更改社区字符串或服务器来发送陷阱,那么这可能是一个简单的改变.您对我如何能够进行此过程有什么建议吗?我可以申请GPO来实现这一目标吗?

  10. Windows:复制正在编写的文件?

    会复制抛出错误吗?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部