首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >检索HTML元素的位置(X,Y)

检索HTML元素的位置(X,Y)
EN

Stack Overflow用户
提问于 2009-01-14 09:35:03
回答 23查看 1.9M关注 0票数 2K

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

EN

回答 23

Stack Overflow用户

发布于 2012-07-09 22:06:25

正确的方法是使用element.getBoundingClientRect()

代码语言:javascript
复制
var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer一直支持这一点,因为只要你可能关心它,它最终在CSSOM Views. All中被标准化,其他浏览器采用了a long time ago

一些浏览器也会返回高度和宽度属性,尽管这不是标准的。如果您担心旧版浏览器的兼容性,请查看此答案的修订版,以了解优化的降级实现。

element.getBoundingClientRect()返回的值是相对于视口的。如果您需要它相对于另一个元素,只需从一个矩形中减去另一个:

代码语言:javascript
复制
var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');
票数 2.1K
EN

Stack Overflow用户

发布于 2009-01-14 10:04:46

这些库使用一些长度来获取元素的精确偏移量。

下面是一个简单的函数,它可以在我尝试过的每种情况下完成这项工作。

代码语言:javascript
复制
function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left; 
票数 355
EN

Stack Overflow用户

发布于 2015-01-30 02:46:35

此函数返回元素相对于整个文档(页面)的位置:

代码语言:javascript
复制
function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

使用这个,我们可以得到X位置:

代码语言:javascript
复制
getOffset(element).left

..。或Y位置:

代码语言:javascript
复制
getOffset(element).top
票数 330
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/442404

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档