[分享]My favorite CSS hack

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

是作者@Gajus Kuizinas从2014年分享后使用至今的一段代码。

出自:

https://dev.to/gajus/my-favorite-css-hack-32g3

干什么用的?
它以不同深浅的颜色,快速标示出各个不同深度的节点,帮助你以最便捷的方式,查看页面上的每个元素的大小,以及他们的margin、padding等等。

在浏览器中,按”F12″调出开发者工具,将上面这段代码添加到样式里,效果示例:

是不是一目了然?


@2020-10-12
今天在知乎看到知友分享,通过javascript能更快速时实现同样的功能,不同的是其通过样式指定了outline,而非backgroundColor,但实现的辅助性是一致的。

[].forEach.call($$("*"),function(a){
    a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

28 个JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注