有没有一种方法可以得到DOM元素的边界框（以像素为单位）？

Question

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

显然，我可以从各种CSS属性（例如width，height等）计算它。

我之所以问这个问题，是因为许多其他图形平台都提供了此方法。例如，根据此帖子中的描述，可以在XUL中执行此操作，该方法被称为getBoundingClientRect()。

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

- user18015

---

这是一个重复的帖子还是这些帖子不是你问题的解决方案？- https://dev59.com/O2855IYBdhLWcg3woV_M - https://dev59.com/HnE95IYBdhLWcg3wI6ft 当我读到这个时，它们听起来确实很相似。希望这些能帮到你。 - shanabus

Answer 1

实际上，有一个内置的方法可以获取边界矩形：Element.getBoundingClientRect

该方法返回一个包含元素在视觉上的顶部、右侧、底部和左侧坐标以及宽度和高度的对象。

示例（JSFiddle）

更多信息：

• Element.getBoundingClientRect
• getBoundingClientRect 真棒（John Resig）

- Aletheios

Answer 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 

- wecsam