我想在 Javascript 中获取页面上对象的绝对 x,y 位置。我怎样才能做到这一点？
我试过obj.offsetTopand obj.offsetLeft，但那些只给出相对于父元素的位置。我想我可以循环并添加父级的偏移量及其父级的偏移量，依此类推，直到我到达没有父级的对象，但似乎应该有更好的方法。谷歌搜索并没有出现太多，甚至 SO 站点搜索也没有找到任何东西。
另外，我不能使用 jQuery。
如何在 Javascript 中获取对象在页面上的绝对位置？
IT技术
javascript
dom
offset
2021-01-17 06:41:27
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中盗取；代码风格、变量名和返回值都改了，以保护无辜）
我肯定会建议使用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属性在 Internet Explorer 8 中。不过它在 Chrome 26.x、Firefox 20.x 和 Opera 12.x 中有效。IE8 中的解决方法： for ，您可以减去返回值的 right 和 left 属性，而 for ，您可以减去 bottom 和 top 属性（像这样）。getBoundingClientRect()undefinedwidthheight