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

Question

我想在Javascript中获取对象在页面上的绝对x，y位置。我怎么能这样做？

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

另外，我不能使用jQuery。

Answer 1

我肯定建议使用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控制台的另一个：

注意：

我必须提到，width方法的返回值的height和getBoundingClientRect()属性在Internet Explorer 8中为undefined。它适用于Chrome 26.x， Firefox 20.x和Opera 12.x虽然。 IE8中的解决方法：对于width，您可以减去返回值的左右属性，对于height，您可以减去底部和顶部属性（like this）。

Answer 2

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无耻地窃取的方法;代码样式，变量名称和返回值已更改以保护无辜者）