查找元素相对于文档的位置

javascript dom

2022-08-30 03:05:19

确定元素相对于文档/正文/浏览器窗口的位置的最简单方法是什么？

现在我正在使用，但此方法仅为您提供相对于父元素的位置，因此您需要确定body元素的父元素数量，以了解与正文/浏览器窗口/文档位置相关的位置。.offsetLeft/offsetTop

这种方法也很麻烦。

答案 1

您可以获得顶部和左侧，而无需像这样遍历DOM：

function getCoords(elem) { // crossbrowser version
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}

答案 2

可以使用 element.getBoundingClientRect（） 来检索相对于视口的元素位置。

然后使用 document.documentElement.scrollTop 计算视口偏移量。

两者之和将给出元素相对于文档的位置：

element.getBoundingClientRect().top + document.documentElement.scrollTop