我想知道如何在JavaScript中获取img和div等HTML元素的X和Y位置。
当前回答
这是一个使用vanilla JS递归迭代element.offsetTop和element.ooffsetParent的现代1行代码：
功能：
getTop = el => el.offsetTop + (el.offsetParent && getTop(el.offsetParent))
用法：
const el = document.querySelector('#div_id');
const elTop = getTop(el)
优势：
无论当前滚动位置如何，始终返回绝对垂直偏移。
传统语法：
function getTop(el) {
return el.offsetTop + (el.offsetParent && getTop(el.offsetParent));
}
其他回答
如果页面至少包含任何“DIV”，meouw给出的函数会将“Y”值抛出到当前页面限制之外。为了找到准确的位置，您需要处理offsetParent和parentNode。
尝试以下代码（检查FF2）：
var getAbsPosition = function(el){
var el2 = el;
var curtop = 0;
var curleft = 0;
if (document.getElementById || document.all) {
do {
curleft += el.offsetLeft-el.scrollLeft;
curtop += el.offsetTop-el.scrollTop;
el = el.offsetParent;
el2 = el2.parentNode;
while (el2 != el) {
curleft -= el2.scrollLeft;
curtop -= el2.scrollTop;
el2 = el2.parentNode;
}
} while (el.offsetParent);
} else if (document.layers) {
curtop += el.y;
curleft += el.x;
}
return [curtop, curleft];
};
大多数浏览器上的HTML元素将具有：-
offsetLeft
offsetTop
它们指定元素相对于其最近的具有布局的父元素的位置。通常可以通过offsetParent属性访问此父级。
IE和FF3具有
clientLeft
clientTop
这些财产不太常见，它们使用其父工作区指定元素位置（填充区是工作区的一部分，但边界和边距不是）。
虽然这很可能会在这么多答案的底部丢失，但这里的顶级解决方案并不适合我。据我所知，其他答案都没有帮助。情况：在HTML5页面中，我有一个菜单，它是页眉中的导航元素（不是页眉，而是另一个元素中的页眉）。我希望一旦用户滚动到顶部，导航就一直保持在顶部，但在此之前，标题是绝对定位的（所以我可以让它稍微覆盖一些其他内容）。上述解决方案从未触发过更改，因为.offsetTop不会更改，因为这是一个绝对定位的元素。此外，scrollTop属性只是最顶部元素的顶部。。。也就是说0并且总是0。我使用这两个（以及getBoundingClientRect结果）执行的任何测试都不会告诉我导航栏的顶部是否曾滚动到可查看页面的顶部（再次，正如控制台中所报告的那样，它们只是在滚动时保持相同的数字）。
解决方案我使用的解决方案
window.visualViewport.pageTop
pageTop属性的值反映了屏幕的可视部分，因此允许我跟踪元素相对于可视区域边界的位置。
也许没必要说，每当我处理滚动时，我都希望使用这个解决方案以编程方式响应正在滚动的元素的移动。希望它能帮助其他人。重要提示：这似乎在Chrome和Opera中有效，在Firefox（6-2018）中肯定不行。。。在Firefox支持visualViewport之前，我建议不要使用这种方法（我希望他们很快会使用……这比其他方法更有意义）。更新：请注意此解决方案。虽然我仍然发现我发现的对于“……以编程方式响应滚动元素的移动”的情况非常有用。我遇到的问题的更好解决方案是使用CSS在元素上设置位置：粘滞。使用sticky，您可以在不使用javascript的情况下让一个元素保持在顶部（注意：有时这不会像将元素更改为固定的那样有效，但对于大多数情况，sticky方法可能会更好）更新01：所以我意识到，对于不同的页面，我需要在一个稍微复杂的滚动设置中检测元素的位置（视差加上作为消息一部分滚动经过的元素）。在这种情况下，我意识到以下内容提供了我用来确定何时做某事的价值：
let bodyElement = document.getElementsByTagName('body')[0];
let elementToTrack = bodyElement.querySelector('.trackme');
trackedObjPos = elementToTrack.getBoundingClientRect().top;
if(trackedObjPos > 264)
{
bodyElement.style.cssText = '';
}
希望这个答案现在更有用。
这很简单，在JS中有两行：
var elem = document.getElementById("id");
alert(elem.getBoundingClientRect());
正确的方法是使用element.getBoundingClientRect（）：
var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
Internet Explorer一直支持这一点，只要您可能关心，它最终在CSSOM视图中被标准化。 所有其他浏览器早就采用了它。
一些浏览器还返回高度和宽度财产，尽管这是非标准的。如果您担心较旧的浏览器兼容性，请检查此答案的修订版，以获得优化的降级实现。
element.getBoundingClientRect（）返回的值与视口相关。如果需要相对于另一个元素使用，只需从另一个矩形中减去一个矩形即可：
var bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
alert('Element is ' + offset + ' vertical pixels from <body>');
