以純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 

如果你會得到真實的，這意味着它的工作;-)