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

确定相对于文档/正文/浏览器窗口的元素位置的最简单方法是什么？ 现在我用的是'.offsetLeft / offsetTop'，但是这个方法只给了你相对于父元素的位置，所以你需要确定body元素有多less个父元素，知道相对于body / browser的位置窗口/文件位置。 这种方法也很麻烦。

Answer 1

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

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

Answer 2

你可以得到顶部和左侧，而不需要像这样遍历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) }; } 

Answer 3

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

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

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

 subjectRect.top + document.documentElement.scrollTop 

Answer 4

如果你使用npm， document-offset是有趣的，它似乎利用来自其他答案的方法。 用法很简单：

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

Answer 5

http://www.quirksmode.org/js/findpos.html解释最好的办法，总而言之，你是在正确的轨道上，你必须find补偿，并穿过父母的树。;

Answer 6

我build议使用

 element.getBoundingClientRect() 

如这里所build议的，而不是通过offsetLeft ， offsetTop和offsetParent进行手动偏移计算。 如这里所提出的在某些情况下*手动遍历产生无效的结果。 看到这个Plunker： http ://plnkr.co/pC8Kgj

*当元素在一个带有静态（=默认）定位的可滚动父级内部时。

Answer 7

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