如何在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()方法的返回值是undefined在Internet Explorer 8,它可以在Chrome 26.x,20.x的Firefox和Opera的12.x虽然.IE8中的解决方法:for width,你可以减去返回值的左右属性,因为height你可以减去bottom和top属性(比如这个).

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