浏览器开发人员工具:HTML元素的位置是什么？

Question

现代Web开发人员工具(在Chrome/FF/IE中,例如)提供了一种查看特定元素的"Box模型"和"计算CSS属性"的方法.然而;

有没有办法用这些工具轻松监控最终的计算/布局位置？

---

优选绝对的,但在母容器内也是合适的.我可以修改使用任何前面提到的[Windows]浏览器,但更喜欢使用Chrome.

Answer 1

在Chrome,Firefox,Edge和IE11 +中,选择元素后,您可以通过键入以下内容来访问控制台窗口中的此元素:

$0

然后,您可以使用Javascript DOM API进行查询和操作,该API具有一个名为Element.getBoundingClientRect()的非常有用的方法.

因此,您只需在选择元素时在控制台窗口中键入以下内容:

$0.getBoundingClientRect()

并且浏览器将返回一个对象,例如:

{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }

Answer 2

Chrome开发工具 - >设置 - >常规 - >元素 - >显示标尺.

您还可以安装Chrome插件,它将为您提供更多功能.