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

【问题标题】：Detect distance of HTML element from to top and to left?检测 HTML 元素从顶部到左侧的距离？
【发布时间】：2011-11-28 11:39:35
【问题描述】：

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

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

我需要能够相对于画布定位动态生成的 html 标签。

【问题讨论】：

标签： javascript html canvas

【解决方案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)
    };
}

【讨论】：

太棒了，谢谢:)。 +1 纯可爱的 javascript。