用来显示页面布局,margin,padding的CSS hack

在做前端开发过程中,有时要查看整体页面的布局,padding,margin。设置是在不同浏览器的实现情况。以下Javascript脚本可以添加到浏览器的书签中,用来打开显示页面的布局,margin以及padding。

CSS hack脚本

javascript: (function() {
var elements = document.body.getElementsByTagName('*');
var items = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
items.push(elements[i]);
}
}
if (items.length > 0) {
for (var i = 0; i < items.length; i++) {
items[i].innerHTML = '';
}
} else {
document.body.innerHTML +=
'<style>* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }\
* * { background-color: rgba(0,255,0,.2) !important; }\
* * * { background-color: rgba(0,0,255,.2) !important; }\
* * * * { background-color: rgba(255,0,255,.2) !important; }\
* * * * * { background-color: rgba(0,255,255,.2) !important; }\
* * * * * * { background-color: rgba(255,255,0,.2) !important; }\
* * * * * * * { background-color: rgba(255,0,0,.2) !important; }\
* * * * * * * * { background-color: rgba(0,255,0,.2) !important; }\
* * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }</style>';
}
})();

效果:


添加脚本到书签

这里以Chrome举例:

  1. 在菜单打开:书签->书签管理
  2. 点击右上角的三个点,选择“添加新书签”
  3. 在新建书签里,给书签一个名字
  4. 复制以上代码,粘贴到添加新书签的网址输入框里,保存。

这样就可以通过点击此书签,来可视化页面的布局。在点击一次就可以关闭。


版权声明:著作权归作者所有。

相关推荐

Vim显示文本的行号(临时/永久)

vim默认是不显示文本的行号,如果要临时显示行号,打开文本后,执行:shift+:临时显示行号在冒号后输出:set nu或者:set number回车,即可显示行号。关闭显示行号:set nonumber 或者 :set nonu 回车,行号就会被关闭永久显示行号需要我们设置配置文件,两种配置方式/etc/vimrc 是系统范围的初始化配置~/.vimrc 个人的vim初始化

一段简单的css debugger代码

在做前端开发常常需要给元素添加一些轮廓来debug页面元素的布局,在github上看到一段很简单的js代码,它结合了css,给元素添加轮廓,以便对css,html页面观察dom元素的布局。完整代码如下:/* debug.css | MIT License | zaydek.github.com/debug.css */if (!("is_debugging" in window)) { is

grep显示匹配以及前后的行

如果要指定匹配前后显示的行数,可以使用-B num指定匹配行前几行,以及使用-A num指定匹配行后几行,如:grep -B 3 -A 2 test demo.txt 如果前后行数一样,可以使用-C num指定前后显示的行数:grep -C 3 test demo.tx

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主