用来显示页面布局，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. 复制以上代码，粘贴到添加新书签的网址输入框里，保存。

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