检测HTML元素从顶部到左侧的距离？

Question

我在HTML5文档中有一个标签。

如何使用JavaScript从HTML页面的左上角到canvas标签的左上角检测距离？

我需要能够相对于画布定位动态生成的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)
    };
}