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

Question

现代网络开发者工具（在Chrome / FF / IE中，例如）提供了一种查看＆＃34; Box模型＆＃34;和＆＃34;计算的CSS属性＆＃34;一个特定的元素。然而;

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

---

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

Answer 1

在Chrome，Firefox，Edge和IE11 +中，选择元素后，您可以通过输入以下内容在控制台窗口中访问此元素：

$0

然后，您可以使用Javascript DOM API进行查询和操作，Element.getBoundingClientRect()有一个非常有用的方法{{3}}。

所以你要做的就是在选择一个元素时在控制台窗口中键入以下内容：

$0.getBoundingClientRect()

并且浏览器将返回一个对象，例如：

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

Answer 2

Chrome开发工具 - ＆gt;设置 - ＆gt;一般 - ＆gt;元素 - ＆gt;显示统治者。

您还可以安装可以提供更多功能的Chrome插件。