如何获取HTML元素（如JavaScript）的X和Y位置？

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

分割线

网友回答：

此函数返回元素相对于整个文档（页面）的位置：

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

使用它我们可以得到 X 位置：

getOffset(element).left

…或 Y 位置：

getOffset(element).top

分割线

网友回答：

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

分割线

网友回答：

这些库会花费一些时间来获得元素的准确偏移量。
这是一个简单的函数，可以在我尝试过的每种情况下完成工作。

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;

模板简介：该模板名称为【如何获取HTML元素（如JavaScript）的X和Y位置？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。