CSS 布局调试工具
说是工具其实只是一段 Javascript 代码,但非常实用,它会给页面里所有的 DOM 元素添加一个 1px 的描边(outline),方便我们在调试 CSS 过程中分析、排查问题。
先来看看代码,它有两个版本,一个是使用的$$
选择器,代码量更少(浏览器控制台支持 $$ 选择器);另一种就是传统的document.querySelectorAll
选择器:
[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}) [].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
下面就看看运行效果:
代码分析
这段代码是 Github 上的 140 bytes 活动中的代码,简单分析下这段 JS 代码,作者使用了不少技巧:
首先是遍历所有元素,这里用的是[].forEach.call(...)
,使用 forEach 替代 for 之类循环能减少不少代码量,而 forEach 是 Array 对象的方法,所以用了个 [] 空数组来代替Array.prototype.forEach
;另外 NodeList 并非一个真正的 Array,所以使用$$('*').forEach
会报错,而这里作者使用了 call (apply也行) 技巧来实现。
下一步就是添加描边,这里使用 outline 是因为它不会影响元素布局;再一个就是描边颜色的算法非常有意思:
CSS 可以设置 16 进制的颜色值,黑色:#000000、白色:#ffffff。这里先把 16 进制转换成数值parseInt("000000", 16) == 0
;parseInt("ffffff", 16) == 16777215
;而 16777215 = 2^24 - 1;因此左位移操作再乖以一个随机数Math.random()*(1<<24)
可以得到一个0 到 16777216之间的值(PS:这里的位运算我也是一知半解,详解请 Google 或者查看最后的参考文章)。
但 Math.random 返回的是一个浮点数字,所以需要取整,这里使用了"~"操作符(按位取反操作)这行代码并不关心正负值。因此通过两次取返就可以得到纯整数部,我们还可以将 ~~ 视为 parseInt 的简写,最后使用 toString(16) 转换成 16 进制得出一个颜色值。
参考文章:http://ourjs.com/detail/54be0a98232227083e000012
源代码:https://gist.github.com/addyosmani/fd3999ea7fce242756b1
CSS 布局调试工具的更多相关文章
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- CSS篇之DIV+CSS布局
<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...
- CSS 布局口诀
body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...
- CSS布局基础——BFC
what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...
随机推荐
- andriod ==和equals
== 用于数字 equals用于字符
- File类的常用方法
public static void GetFileInfo() { File file=new File("e:","two.txt ...
- Cent OS 6.4安装mysql
Cent OS6.4 RPM安装mysql 一.卸载掉原有mysql 因为目前主流Linux系统版本基本上都集成了mysql数据库在里面 如下命令来查看我们的操作系统上是否已经安装了mysql数据库 ...
- Mac上的软件使用介绍
目录大纲: Drop to GIF Parallels Desktop 1.Drop to GIF 功能:将视频文件可以生产动态图gif文件 网址在github上:https://github.com ...
- Objective-C之集合对象的内存管理
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- JSP基础--JAVA遇见HTML
1.手工编写第一个WEB应用程序 2.默认访问服务器网页首页欢迎界面是 index.jsp,就是网页链接访问其所在的文件夹目录,不访问这个文件,也会自动访问的.如果这个文件夹目录下没有index.js ...
- android 之 ExpandableListView列表中的列表
有时候,我们需要设计这样一个界面,外面有一个列表,当我们点击其中列表中的某个条目时,就会展开这个条目,出现一个新的列表.比如下图:(程序运行的效果图,在这里贴出来) 当我们点击第一项时,视图变为: - ...
- SAP SD业务的简图
- PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
- Java解决题目:有一对兔子,从出生第三个月起每个月都生一对兔子,小兔子长到第三个月后,每个月又生一对兔子。。。
题目:有一对兔子,从出生第三个月起每个月都生一对兔子,小兔子长到第三个月后,每个月又生一对兔子,假如兔子都不死,问M个月时兔子的数量,M为键盘读入的正整数.(请用Java语言作答) 样例输入: 3 样 ...