有没有办法获取 DOM 元素的边界框（以像素为单位）？答案

【问题标题】：Is there a way to get the bounding box (in pixels) of a DOM element?有没有办法获取 DOM 元素的边界框（以像素为单位）？
【发布时间】：2013-10-12 00:10:04
【问题描述】：

有没有办法使用 Javascript 获取 DOM 元素的边界框坐标？

显然，我可以根据各种 CSS 属性计算它：width、height 等等。

我问是因为有许多其他图形平台提供此方法。例如，显然它可以按照this post 在 XUL 中完成，它描述了一种方法getBoundingClientRect()。

（我的目标是检查两个元素是否重叠。）

【问题讨论】：

这是重复的帖子还是这些帖子不能解决您的问题？ - stackoverflow.com/questions/4230029/… - stackoverflow.com/questions/2440377/… 当我读到这篇文章时，它们听起来确实很相似。希望这些帮助。

标签： javascript html css

【解决方案1】：

其实有一个内置的方法来获取边界矩形：Element.getBoundingClientRect

该方法返回一个对象，其中包含元素的（可视）顶部、右侧、底部和左侧坐标以及它的宽度和高度。

Example (JSFiddle)

更多信息：

【讨论】：

【解决方案2】：

假设您的 DOM 元素的 ID 为 myElement。

document.getElementById("myElement").offsetLeft; //Left side of box 
document.getElementById("myElement").offsetTop;  //Top side of box 
document.getElementById("myElement").offsetLeft 
    + document.getElementById("myElement").offsetWidth; //Right side of box
document.getElementById("myElement").offsetTop
    + document.getElementById("myElement").offsetHeight; //Bottom side of box

对于底部和右侧，代码基本上将边界框的宽度或高度添加到左侧或顶部。

如果你愿意，你可以定义一次document.getElementById("myElement")并使用引用，如下：

var myElement = document.getElementById("myElement");
myElement.offsetLeft; //Left side of box 
myElement.offsetTop;  //Top side of box 
myElement.offsetLeft + myElement.offsetWidth; //Right side of box
myElement.offsetTop + myElement.offsetHeight; //Bottom side of box

【讨论】：