检测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) 
    }; 
}