如何获取对象'；在Javascript中，页面上的绝对位置是多少？

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

我尝试了

obj.offsetTop

和

obj.offsetLeft

，但它们只给出相对于父元素的位置。我想我可以循环并添加父对象的偏移量，以及它的父对象的偏移量，等等，直到到达没有父对象的对象，但似乎应该有更好的方法。谷歌搜索结果不多，即使如此，网站搜索也没有找到任何东西

另外，我不能使用jQuery

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中盗取；代码样式、变量名和返回值被更改以保护无辜）

我绝对建议使用。

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

语法

var rectObject=object.getBoundingClientRect（）

退换商品
返回的值是一个对象，它是
元素返回的矩形，即CSS
与元素关联的边框框

返回的值是一个
TextRectangle
对象，它包含只读
左侧
，
顶部
，
右侧
和
底部
描述边框框的属性，在
像素，左上角相对于视口左上角

以下是从链接的MDN站点获取的浏览器兼容性表：

+---------------+--------+-----------------+-------------------+-------+--------+
|特色| Chrome | Firefox（壁虎）| Internet Explorer | Opera | Safari|
+---------------+--------+-----------------+-------------------+-------+--------+
|基本支持| 1.0 | 3.0（1.9）| 4.0 |（是）| 4.0|
+---------------+--------+-----------------+-------------------+-------+--------+

它得到了广泛的支持，并且非常容易使用，更不用说它非常快。以下是John Resig的一篇相关文章：

您可以这样使用它：

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);

下面是一个非常简单的示例：（您可以通过单击右上角的“在JS Bin中编辑”来查看和编辑代码）

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

注:
我必须提到
getBoundingClientRect（）
方法的返回值的
width
和
height
属性在Internet Explorer 8中是
未定义的。但它在Chrome 26.x、Firefox 20.x和Opera 12.x中都能工作。IE8中的解决方法：对于
width
，可以减去返回值的左右属性；对于
height
，可以减去底部和顶部属性（）。
Dup:另一个Dup:站点搜索再次失败！谢谢大家，我想这一定是在投票表决提出一个真正的（没有框架的）JavaScript问题之前提出来的。@Sk8erPeter的答案是正确的。这是一个完全不同的用例吗？向下滚动页面并再次检查您的值<代码>getBoundingClientRect（）
用于相对于滚动窗口的位置。。。当您滚动通过徽标时，您的最大值将变为负值。@jondavidjohn当然可以，但可以通过添加
window.pageYOffset
（或者，如果您确实需要IE8兼容性，）轻松调整。水平滚动也一样。我认为你应该编辑答案，以包含这个页面偏移量片段，这样可以回答最初的OP问题。成为得票最多的答案会带来一些责任；）在我的例子中，
getBoundingClientRect
从顶部返回了错误的偏移量。@yelpless的建议正在发挥作用。但是
getBoundingClientRect
不会返回元素
x
，
y
的
绝对位置，我喜欢代码下面的注释：谢谢！我只投了一票：）注意，元素的样式必须是相对的、绝对的或固定的，我想？我也喜欢这个评论！：）