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

　　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，改天试试看。

　　顺便贴个测试结果：

赞 (0)

相关推荐

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

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

    document.styleSheets里保存了当前页面上所有CSS规则的集合.通过它可以遍历出页面<style>里定义的所有selector,访问selectorText属性可得选择器的匹配规则.然后将规则规则传递给 document.querySelectorAll 即可获取页面内匹配此规则的元素列表. 这里我们只求CSS规则的覆盖率,所以访问 querySelectorAll().length 即可.通过排序就可看出各个CSS使用情况. 代码很简单. 复制代码 代码如下: var usa

  • 20行代码实现的一个CSS覆盖率测试脚本

    20行代码实现的一个CSS覆盖率测试脚本

    document.styleSheets里保存了当前页面上所有CSS规则的集合.通过它可以遍历出页面<style>里定义的所有selector,访问selectorText属性可得选择器的匹配规则.然后将规则规则传递给 document.querySelectorAll 即可获取页面内匹配此规则的元素列表.这里我们只求CSS规则的覆盖率,所以访问 querySelectorAll().length 即可.通过排序就可看出各个CSS使用情况.代码很简单. 复制代码 代码如下: var usage

  • Go语言开发区块链只需180行代码(推荐)

    区块链开发用什么语言?通过本文你将使用Go语言开发自己的区块链(或者说用go语言搭建区块链).理解哈希函数是如何保持区块链的完整性.掌握如何用Go语言编程创造并添加新的块.实现多个节点通过竞争生成块.通过浏览器来查看整个链.了解所有其他关于区块链的基础知识. 但是,文章中将不会涉及工作量证明算法(PoW)以及权益证明算法(PoS)这类的共识算法,同时为了让你更清楚得查看区块链以及块的添加,我们将网络交互的过程简化了,关于 P2P 网络比如"全网广播"这个过程等内容将在后续文章中补上.

  • python只需30行代码就能记录键盘的一举一动

    python只需30行代码就能记录键盘的一举一动

    目录 先看看效果 一.公共WiFi 公用电脑什么的 二.键盘记录器 三.python代码实现 1.安装pynput模块 2.脚本完整代码 3.启动脚本 4.登录126邮箱 抓取用户信息 四.安全提示 先看看效果 Like This↓ 一.公共WiFi 公用电脑什么的 在我们日常在线上工作.玩耍时,不论开电脑.登录淘宝.玩网游 统统都会用到键盘输入 在几乎所有网站,例如淘宝.百度.126邮箱等等 为了保护用户信息 登录时,输入框都是不可见的. 但是,输入框都在界面上隐藏,让我们看不到,就能真正的确

  • 利用ImageAI库只需几行python代码实现目标检测

    什么是目标检测 目标检测关注图像中特定的物体目标,需要同时解决解决定位(localization) + 识别(Recognition).相比分类,检测给出的是对图片前景和背景的理解,我们需要从背景中分离出感兴趣的目标,并确定这一目标的描述(类别和位置),因此检测模型的输出是一个列表,列表的每一项使用一个数组给出检出目标的类别和位置(常用矩形检测框的坐标表示). 通俗的说,Object Detection的目的是在目标图中将目标用一个框框出来,并且识别出这个框中的是啥,而且最好的话是能够将图片的所

  • 女神相册密码忘记了 我只用Python写了20行代码

    女神相册密码忘记了 我只用Python写了20行代码

    视频地址 我用20行代码,帮女神破解相册密码 一.事情是这样的 今早上班,公司女神小姐姐说,她去年去三亚旅游的照片打不开了 好奇问了一下才知道. 原来是,她把照片压缩了,而且还加了密码. 但是密码不记得了,只记得是一串6位数字. 话说照片压缩率也不高,而且还加密,难道是有什么可爱的小照片 但是作为一个正(ba)直(gua)的技术人员 我跟她说:"这事交给我,python写个脚本,帮你破解掉~~" 二.首先回顾一下女神的操作流程 对相册进行压缩的时候,添加了密码. LIke This ↓

  • Python使用20行代码实现微信聊天机器人

    近来,打开微信群发消息,就会秒收到一些活跃分子的回复,有的时候感觉对方回答很在理,但是有的时候发现对方的回答其实是驴唇不对马嘴,仔细深究发现,原来对方是机器人.今天,小编就带大家用20行代码,带你一起打造一个微信聊天机器人,让你的微信群一直嗨不停~~ 首先我们需要安装一个微信相关的第三方库,itchat,在Windows上通过命令:pip install itchat,就可以将其安装. 其二,我们需要去图灵机器人官网:http://www.tuling123.com,注册一下,即可获得一个机器人

  • 20行代码简单实现koa洋葱圈模型示例详解

    目录 引言 koa中间件的使用 洋葱圈模型 洋葱圈模型的实现,koa-compose 单次调用限制 koa-compose与流程引擎 总结 引言 koa想必很多人直接或间接的都用过,其源码不知道阅读本文的你有没有看过,相当精炼,本文想具体说说koa的中间件模型,一起看看koa-compose的源码,这也是koa系列的第一篇文章,后续会更新一下koa相关的其他知识点 koa中间件的使用 先让我们启动一个koa服务 // app.js const koa = require('koa'); cons

  • PHP基于关联数组20行代码搞定约瑟夫问题示例

    PHP基于关联数组20行代码搞定约瑟夫问题示例

    本文实例讲述了PHP基于关联数组20行代码搞定约瑟夫问题.分享给大家供大家参考,具体如下: 记得前段时间一写做java开发的兄弟对我说他java60行做了个约瑟夫问题,挺不错的.调侃php应该写这个挺不行的. 于是 呵呵... 洋洋洒洒 20行,写完自己都有些不相信了.哈哈 让不了解php的见识哈php的快捷轻便之处. ps:其实个人挺反感用代码行数来衡量代码数量的,感觉常把代码行数挂嘴边的大多无奈装2.此文仅属闲余娱乐. 回顾一下约瑟夫问题:N个人围成一圈,从第一个开始报数,第M个将被杀掉,最

  • 不到20行代码用Python做一个智能聊天机器人

    伴随着自然语言技术和机器学习技术的发展,越来越多的有意思的自然语言小项目呈现在大家的眼前,聊天机器人就是其中最典型的应用,今天小编就带领大家用不到20行代码,运用两种方式搭建属于自己的聊天机器人. 1.神器wxpy库 首先,小编先向大家介绍一下本次运用到的python库,本次项目主要运用到的库有wxpy和chatterbot. wxpy是在 itchat库 的基础上,通过大量接口优化,让模块变得简单易用,并进行了功能上的扩展.什么是接口优化呢,简单来说就是用户直接调用函数,并输入几个参数,就可以

随机推荐