标签：elements 技巧 items 元素 UI CSS var 调试 outline

在业务开发过程中，想必大家经常会需要查看一个元素的位置及大小并修改它的 CSS，因此就会频繁使用到 DevTools 中的选择元素功能

其实我们可以使用一个 CSS 技巧给所有元素加上outline，这样就能迅速了解自己所需的元素位置信息，无须再选择元素查看了。

我们只需要添加以下 CSS 就能为任何网站添加这样的效果

html * {
    outline: 1px solid red
}

需要注意的是这里我没有使用 border 的原因是border 会增加元素的大小但是 outline 不会。

通过这个技巧不仅能帮助我们在开发中迅速了解元素所在的位置，还能帮助我们方便地查看任意网站的布局。

但是当下这个技巧需要我们手动添加 CSS 来实现，显得略微有点鸡肋，是否可以通过一个开关来实现任意网页开启关闭这个功能呢？

答案是有的，我们需要借助 Chrome 的书签功能。

1. 打开书签管理页

2. 右上角三个点「添加新书签」

3. 名称随意，粘贴以下代码到网址中

javascript: (function() {
	var elements = document.body.getElementsByTagName('*');
	var items = [];
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].innerHTML.indexOf('html * { outline: 1px solid red }') != -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>html * { outline: 1px solid red }</style>';
	}
})();

然后我们就可以在任意网站上点击刚才创建的书签，内部会判断是否存在调试的 style。存在的话就删除，不存在的话就添加，通过这种方式我们就能很方便的通过这个技巧查看任意网页的布局了。

标签：elements,技巧,items,元素,UI,CSS,var,调试,outline
来源： https://www.cnblogs.com/duanlibo/p/12557026.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。