检索HTML元素的位置（X，Y）

我想知道如何在JavaScript中获取img和div等HTML元素的X和Y位置。

当前回答

我发现的最干净的方法是jQuery的偏移所使用的技术的简化版本。与其他一些答案类似，它从getBoundingClientRect开始；然后，它使用窗口和documentElement来调整滚动位置以及正文上的边距（通常是默认值）。

var rect = el.getBoundingClientRect();
var docEl = document.documentElement;

var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

var els=文档.getElementsByTagName（“div”）；var docEl=文档.documentElement；对于（var i=0；i<els.length；i++）{var rect=els[i].getBoundingClientRect（）；var rectTop=rect.top+window.pageYOffset-docEl.clientTop；var rectLeft=rect.left+window.pageXOffset-docEl.clientLeft；els[i].innerHTML=“<b>”+rectLeft+“，”+rectTop+“</b>”；}第二部分{宽度：100px；高度：100px；背景色：红色；边框：1px实心黑色；}#相关{位置：相对；左：10px；顶部：10px；}#绝对值{位置：绝对；顶部：250px；左：250px；}<div id=“rel”></div><div id=“abs”></div><div></div>

2014-11-04 14:17:15

其他回答

正确的方法是使用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>');

2012-07-09 14:06:24

如果使用jQuery，维度插件非常出色，可以让您精确地指定所需内容。

e.g.

相对位置，绝对位置，无填充的绝对位置，有填充。。。

继续下去，让我们说你可以用它做很多事情。

另外，使用jQuery的好处是它的文件大小很小，使用起来很方便，以后如果没有它，就不会返回JavaScript。

2009-01-14 10:24:21

获取div相对于左侧和顶部的位置

  var elm = $('#div_id');  //get the div
  var posY_top = elm.offset().top;  //get the position from top
  var posX_left = elm.offset().left; //get the position from left

2018-04-09 19:50:09

虽然这很可能会在这么多答案的底部丢失，但这里的顶级解决方案并不适合我。据我所知，其他答案都没有帮助。情况：在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 = '';
  }

希望这个答案现在更有用。

2017-10-24 19:23:22

要有效地检索相对于页面的位置，而不使用递归函数：（还包括IE）

var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?                   
                 document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;

2013-07-26 01:49:09

检索HTML元素的位置（X，Y）

推荐文章

最新文章

标签