问题:
回答1:
You can traverse the offsetParent up to the top level of the DOM.
function getOffsetLeft( elem ) { var offsetLeft = 0; do { if ( !isNaN( elem.offsetLeft ) ) { offsetLeft += elem.offsetLeft; } } while( elem = elem.offsetParent ); return offsetLeft; } 回答2:
You can get top and left without traversing DOM like this:
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) }; } 回答3:
You can use element.getBoundingClientRect() to retrieve element position relative to the viewport.
Use scrollY (document.documentElement.scrollTop cross-browser compatible) to calculate the viewport offset.
The sum of the two will give the element position relative to the document:
subjectRect.top + document.documentElement.scrollTop 回答4:
If you're using npm, document-offset is interesting and it seems to leverage approaches from the other answers here. The usage is pretty simple:
var offset = require('document-offset') var target = document.getElementById('target') console.log(offset(target)) // => {top: 69, left: 108} 回答5:
http://www.quirksmode.org/js/findpos.html Explains the best way to do it, all in all, you are on the right track you have to find the offsets and traverse up the tree of parents.
回答6:
I suggest using
element.getBoundingClientRect() as proposed here instead of manual offset calculation through offsetLeft, offsetTop and offsetParent. as proposed here Under some circumstances* the manual traversal produces invalid results. See this Plunker: http://plnkr.co/pC8Kgj
*When element is inside of a scrollable parent with static (=default) positioning.
回答7:
If you don't mind using jQuery, then you can use offset() function. Refer to documentation if you want to read up more about this function.
回答8:
Tested in IE 11, Chrome 62, Firefox 56, Edge 38:
var box = domElement.getBoundingClientRect(); var offsetTop = Math.floor(box.top && box.top || box.y && box.y || 0); Use left/x for offsetLeft.
回答9:
For those that want to get the x and y coordinates of various positions of an element, relative to the document.
const getCoords = (element, position) => { const { top, left, width, height } = element.getBoundingClientRect(); let point; switch (position) { case "top left": point = { x: left + window.pageXOffset, y: top + window.pageYOffset }; break; case "top center": point = { x: left + width / 2 + window.pageXOffset, y: top + window.pageYOffset }; break; case "top right": point = { x: left + width + window.pageXOffset, y: top + window.pageYOffset }; break; case "center left": point = { x: left + window.pageXOffset, y: top + height / 2 + window.pageYOffset }; break; case "center": point = { x: left + width / 2 + window.pageXOffset, y: top + height / 2 + window.pageYOffset }; break; case "center right": point = { x: left + width + window.pageXOffset, y: top + height / 2 + window.pageYOffset }; break; case "bottom left": point = { x: left + window.pageXOffset, y: top + height + window.pageYOffset }; break; case "bottom center": point = { x: left + width / 2 + window.pageXOffset, y: top + height + window.pageYOffset }; break; case "bottom right": point = { x: left + width + window.pageXOffset, y: top + height + window.pageYOffset }; break; } return point; }; Usage
getCoords(document.querySelector('selector'), 'center')getCoords(document.querySelector('selector'), 'bottom right')getCoords(document.querySelector('selector'), 'top center')