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

Posted 2023-02-21

【中文标题】如何在 Javascript 中获取对象在页面上的绝对位置？ [复制]

【英文标题】：How can I get an object's absolute position on the page in Javascript? [duplicate]

【发布时间】：2010-12-01 14:18:06

【问题描述】：

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

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

另外，我不能使用 jQuery。

【问题讨论】：

复制：***.com/questions/442404/…

另一个副本：***.com/questions/160144/…

网站搜索再次失败！谢谢大家，我想这必须在之前出现

因提出真正的（无框架）JavaScript 问题而被投票赞成。 @Sk8erPeter 的答案是要走的路。

【参考方案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 中窃取；更改代码样式、变量名和返回值以保护无辜者）

【讨论】：

我喜欢代码下方的评论：D

谢谢！我只有一张赞成票要给:)

请注意，我认为元素的样式必须是相对的、绝对的或固定的？

也喜欢这个评论！:)

【参考方案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 中是undefined。它适用于Chrome 26.x、Firefox 20.x 和Opera 12。 x虽然。 IE8 中的解决方法：对于width，您可以减去返回值的左右属性，对于height，您可以减去底部和顶部属性（like this）。

【讨论】：

这是一个完全不同的用例吗？向下滚动页面并再次检查您的值...getBoundingClientRect() 是相对于滚动窗口的位置...当您滚动经过徽标时，您的最高值将变为负数。

@jondavidjohn 当然可以，但是可以通过添加 window.pageYOffset 轻松调整（或者，如果你真的需要 IE8 兼容性，(window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop）。水平滚动也是如此。

我认为您应该编辑答案以包含此页面偏移量 sn-p 以回答原始 OP 问题的方式。成为最受欢迎的答案会带来一些责任；）

就我而言，getBoundingClientRect 从顶部返回了错误的偏移量。 @eyelidlessness 的建议正在发挥作用。

但是getBoundingClientRect 不返回元素的x、y 的absolute 位置