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

Question

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

显然我可以从各种CSS属性中计算它：width，height等等。

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

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

Answer 1

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

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

Example (JSFiddle)

更多信息：

• Element.getBoundingClientRect
• getBoundingClientRect is Awesome (John Resig)

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