浏览器开发者工具：HTML 元素的位置是啥？

Posted 2023-02-19

【中文标题】浏览器开发者工具：HTML 元素的位置是啥？

【英文标题】：Browser developer tools: what is the Position of the HTML element?浏览器开发者工具：HTML 元素的位置是什么？

【发布时间】：2015-01-05 09:46:52

【问题描述】：

现代 Web 开发工具（例如在 Chrome / FF / IE 中）提供了一种查看特定元素的“盒子模型”和“计算 CSS 属性”的方法。但是；

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

---

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

【参考方案1】：

In Chrome, Firefox, Edge and IE11+, when an element is selected, you can access this element in the console window by typing:

$0

然后您可以使用javascript DOM API 进行查询和操作，它有一个非常有用的方法，称为Element.getBoundingClientRect()。

因此，您只需在选择元素时在控制台窗口中输入以下内容：

$0.getBoundingClientRect()

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

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

【讨论】：

这些值是否正确？当一个元素从72 开始并以99 结束时，它怎么能有28 的高度（99 - 72 = 27？宽度也一样...）

在 Chrome 开发工具中，您还可以使用 $0 添加“实时表达式”以获取更新的值

【参考方案2】：

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

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

【讨论】：

标尺相当整齐，但不够精确或不够动态。我希望能够在页面重排期间密切关注动态变化的值，就像当前的“盒子模型”显示一样。对于插件，你有推荐吗？我查找的少数似乎更倾向于一般网站开发和问题识别。

除了基本的标尺外，我真的不需要任何东西，所以我对插件没有真正的有根据的建议。那里似乎有很多，而且功能看起来可能接近您的需要。