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

确定元素相对于文档/正文/浏览器窗口的位置的最简单方法是什么？现在我使用的是'.offsetLeft/offsetTop'，但是这种方法只会给你相对于父元素的位置，所以你需要确定身体元素的父母有多少，以知道与身体/浏览器相关的位置窗口/文件位置。这种方法也很麻烦。查找元素相对于文档的位置

来源

2011-04-08 einstein

您可以遍历offsetParent直到DOM的顶层。

function getOffsetLeft(elem) 
{ 
    var offsetLeft = 0; 
    do { 
     if (!isNaN(elem.offsetLeft)) 
     { 
      offsetLeft += elem.offsetLeft; 
     } 
    } while(elem = elem.offsetParent); 
    return offsetLeft; 
}

来源

2011-04-08 17:41:03 KeatsKelleher

+20

不，当任何父母（特别是HTML元素!!!）有边距，填充或边框时。 – 2014-11-20 15:10:40

关于保证金的东西......它可能有助于设置框的大小为边框......或沿着这些线......什么都不能修复...... – 2017-10-20 08:55:45

http://www.quirksmode.org/js/findpos.html解释最好的办法，总而言之，你在正确的轨道上，你必须找到偏移量，并沿着父母的树。

来源

2011-04-08 17:38:47

您可以使用element.getBoundingClientRect()来获取相对于视元素位置。

使用scrollY（document.documentElement.scrollTop跨浏览器兼容）计算视口偏移量。

两者的总和将给出相对于元件的位置到文档：

subjectRect.top + document.documentElement.scrollTop

来源

2013-09-07 13:11:21

相对于视口是不是与文档相同。如果页面向下滚动一点，则相对于视口的顶部将是比相对于文档顶部更小的数字。 – MrVimes 2014-06-21 12:20:54

他相对于视口开始并添加scrollY以相对于文档获取它。 – 2017-03-20 17:40:59

我建议使用

element.getBoundingClientRect()

提议here 代替手工偏移计算的通过offsetLeft， offsetTop and offsetParent。如提议here 在某些情况下*手动遍历会产生无效结果。请参阅此Plunker：http://plnkr.co/pC8Kgj

*当元素位于具有静态（=默认）定位的可滚动父级中时。

来源

2014-01-02 11:25:16 HANiS

您也可以通过将scrollLeft和scrollTop合并到其中来使偏移量计算工作。 – 2015-08-18 18:36:57

但是我发现'offsetLeft'和'offsetTop'没有考虑CSS3变换，'getBoundingClientRect（）'做。因此，结果可能无效。如果你需要它，你可以使用'（element.getBoundingClientRect（）。left - parent.getBoundingClientRect（）。left）'获得一个元素相对于父元素的偏移量（比如'offsetLeft'）。 – 2015-08-18 20:19:02

119

你可以得到顶部和离开不必通过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) }; 
}

来源

2014-10-07 07:43:14 basil

这个答案没有考虑父母的偏移量。它只是相对于视口 – Nickey 2016-09-16 12:09:07

@Nickey不正确 - 视口位置加上滚动偏移量检查，会产生相对于整个文档的坐标。 – natchiketa 2016-12-21 13:00:17

可以在移动设备上的越野车http://stackoverflow.com/a/32623832/962634需要调查 – basil 2017-01-28 06:30:33

如果您使用NPM，document-offset有趣的是，它似乎能够充分利用这里的其他答案的方法。用法很简单：

var offset = require('document-offset') 
var target = document.getElementById('target') 
console.log(offset(target)) 
// => {top: 69, left: 108}

来源

2015-07-08 18:12:41

如果你不介意使用jQuery，那么你可以使用offset()函数。如果您想了解更多关于此功能的信息，请参阅documentation。

来源

2016-08-12 09:35:40 user3559787

测试在IE 11，铬62，火狐56，边缘38：

var box = domElement.getBoundingClientRect(); 
var offsetTop = Math.floor(box.top && box.top || box.y && box.y || 0);

使用放置offsetLeft/X。

来源

2017-11-21 14:36:26 Zymotik

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

回答

相关问题