105

我想在 Javascript 中获取对象在页面上的绝对 x,y 位置。我怎样才能做到这一点?

我试过obj.offsetTopand obj.offsetLeft,但那些只给出相对于父元素的位置。我想我可以循环并添加父级的偏移量及其父级的偏移量,依此类推,直到我到达没有父级的对象,但似乎应该有更好的方法。谷歌搜索并没有出现太多,甚至 SO 站点搜索也没有找到任何东西。

另外,我不能使用 jQuery。

4

2 回答 2

177
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 中窃取;更改代码样式、变量名和返回值以保护无辜者)

于 2009-09-26T01:02:30.320 回答
153

我肯定会建议使用element.getBoundingClientRect()

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

概括

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

句法

var rectObject = object.getBoundingClientRect();

退货

返回值是一个TextRectangle对象,它是getClientRects()为元素返回的矩形的并集,即与元素关联的CSS 边框框。

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

这是从链接的 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 控制台的: 在 Chrome 中使用 element.getBoundingClientRect()

笔记:

不得不提的是,该方法的返回值的widthheight属性在 Internet Explorer 8 中。不过,它可以在 Chrome 26.x、Firefox 20.x 和 Opera 12.x 中使用。IE8 中的解决方法:对于,您可以减去返回值的左右属性,对于,您可以减去底部和顶部属性(像这样)。getBoundingClientRect()undefinedwidthheight

于 2013-05-18T17:03:10.380 回答