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

Question

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

显然我可以从各种CSS属性中计算它:width,height等等.

我问,因为有许多其他图形平台提供此方法.例如,显然可以按照这篇文章在XUL中完成,它描述了一种方法getBoundingClientRect().

(我的目标是检查两个元素是否重叠.)

Answer 1

实际上,有一个内置的方法来获取边界矩形: Element.getBoundingClientRect

该方法返回一个对象,该对象包含元素的(可视)顶部,右侧,底部和左侧坐标以及其宽度和高度.

示例(JSFiddle)

更多信息:

• Element.getBoundingClientRect
• getBoundingClientRect很棒(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