以纯javascript获取HTML元素的真实位置

Question

如何在纯JavaScript中获取屏幕中的真实坐标（顶部和左侧）？

方法我发现父元素使用递归来计算坐标，但似乎他们并不覆盖所有的网页，像here，here和here

Answer 1

因为我浏览净了很久才找到一个解决方案，它不使用任何JavaScript库，因为我发现，建议使用jQuery的方法.offset()所有的答案，我决定复制此梅索德和做一个小纯JavaScript offset()功能做同样的事情：

function isWindow(obj) { 
    return obj != null && obj === obj.window; 
} 
function getWindow(elem) { 
    return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView; 
} 
function offset(elem) { 

    var docElem, win, 
     box = { top: 0, left: 0 }, 
     doc = elem && elem.ownerDocument; 

    docElem = doc.documentElement; 

    if (typeof elem.getBoundingClientRect !== typeof undefined) { 
     box = elem.getBoundingClientRect(); 
    } 
    win = getWindow(doc); 
    return { 
     top: box.top + win.pageYOffset - docElem.clientTop, 
     left: box.left + win.pageXOffset - docElem.clientLeft 
    }; 
}; 

呦ü可以在这里尝试一下这个网页上（我们将采取在页面，回答区域底部的元素，因为它的存在是其他方法失败），在控制台上运行：

offset(document.getElementById('wmd-input')).top == $('#wmd-input').offset().top 

如果你会得到真实的，这意味着它的工作;-)