檢測HTML元素從頂部到左側的距離？

Question

我在HTML5文檔中有一個標籤。

如何檢測從HTML頁面左上角到畫布標籤左上角的JavaScript距離？

我需要能夠相對於畫布定位動態生成的html標籤。

Answer 1

getBoundingClientRect()是您的朋友，並且在所有瀏覽器的最新版本（Firefox 3，Safari 4，Chrome，Opera 9.5，IE 5）中都受支持。它會給你不過座標相對於視而非頁面，所以你需要在文檔上的滾動量增加：

function getPageTopLeft(el) { 
    var rect = el.getBoundingClientRect(); 
    var docEl = document.documentElement; 
    return { 
     left: rect.left + (window.pageXOffset || docEl.scrollLeft || 0), 
     top: rect.top + (window.pageYOffset || docEl.scrollTop || 0) 
    }; 
}