检测HTML元素从上到左的距离

Detect distance of HTML element from to top and to left?

本文关键字:距离 HTML 元素 检测      更新时间:2023-09-26

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

我如何检测JavaScript从HTML页面的左上角到画布标签的左上角的距离?

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

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