如何在 Javascript 中获取对象在页面上的绝对位置？

Question

我想在 Javascript 中获取对象在页面上的绝对 x,y 位置。我该怎么做？

我尝试了 obj.offsetTop 和 obj.offsetLeft，但它们仅给出相对于父元素的位置。我想我可以循环并添加父级的偏移量及其父级的偏移量，依此类推，直到到达没有父级的对象，但似乎应该有更好的方法。谷歌搜索并没有找到太多结果，甚至网站搜索也没有找到任何东西。

另外，我无法使用 jQuery。

Answer 1

var cumulativeOffset = function(element) {
    var top = 0, left = 0;
    do {
        top += element.offsetTop  || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
    } while(element);

    return {
        top: top,
        left: left
    };
};

（无耻地窃取PrototypeJS的方法；更改代码风格、变量名和返回值以保护无辜者）

Answer 2

我绝对建议使用 element.getBoundingClientRect()。

https ://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

摘要

返回包含一组文本的文本矩形对象
矩形。

语法

var rectObject = object.getBoundingClientRect();

返回

返回的值是一个 TextRectangle 对象，它是这
getClientRects() 用于元素，即 CSS
与元素关联的边框。

返回值是一个TextRectangle对象，其中包含只读
描述边框框的 left、top、right 和 bottom 属性，位于
像素，左上角相对于视口的左上角。

这是取自链接的 MDN 站点的浏览器兼容性表：

+---------------+--------+-----------------+-------------------+-------+--------+
|    Feature    | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
+---------------+--------+-----------------+-------------------+-------+--------+
| Basic support | 1.0    | 3.0 (1.9)       | 4.0               | (Yes) | 4.0    |
+---------------+--------+-----------------+-------------------+-------+--------+

它受到广泛支持，并且非常易于使用，更不用说它非常快了。以下是 John Resig 的相关文章： http://ejohn.org/blog/getboundingclientrect-is- Awesome/

你可以像这样使用它：

var logo = document.getElementById('hlogo');
var logoTextRectangle = logo.getBoundingClientRect();

console.log("logo's left pos.:", logoTextRectangle.left);
console.log("logo's right pos.:", logoTextRectangle.right);

这是一个非常简单的示例：http ://jsbin.com/awisom/2（您可以通过点击右上角的“在 JS Bin 中编辑”来查看和编辑代码）。

或者这是使用 Chrome 控制台的另一个：

注意：

我必须提到 getBoundingClientRect() 方法的 width 和 height 属性返回值在 Internet Explorer 8 中是未定义。但它可以在 Chrome 26.x、Firefox 20.x 和 Opera 12.x 中运行。 IE8 中的解决方法：对于 width，您可以减去返回值的 right 和 left 属性，对于 height，您可以减去 Bottom 和 Top 属性 (像这样）。