浏览器开发人员工具:HTML元素的位置是什么? [英] Browser developer tools: what is the Position of the HTML element?

问题描述

现代的Web开发工具(例如，在Chrome/FF/IE中)提供了一种查看特定元素的框模型"和计算CSS属性"的方法.但是；

Modern Web Developer tools (in Chrome / FF / IE, eg.) provide a way to see the "Box Model" and "Computed CSS Properties" of a particular element. However;

是否可以使用此类工具轻松监控最终的计算/布局位置?

Is there a way to monitor the final computed/layout position easily with such tools?

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

Preferably absolute, but within the parent container is also suitable. I am amendable to using any of the previously mentioned [Windows] browsers, but prefer to use Chrome.

推荐答案

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

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().

因此，您要做的就是在选择元素后在控制台窗口中键入以下内容:

So all you have to do is type the following into the console window when an element is selected:

$0.getBoundingClientRect()

，浏览器将返回一个对象，例如:

and the browser will return an object such as:

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

这篇关于浏览器开发人员工具:HTML元素的位置是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！