迹忆客 专注技术分享

HTML 文档中的每个元素都放置在给定的位置。这里的位置是指元素的 x 和 y 坐标。

在本篇文章中，我们获取 HTML 元素在 JavaScript 中的位置。

在 JavaScript 中使用 Element.getBoundingClientRect() 函数获取元素的位置

getBoundingClientRect() 函数生成一个 DOMRect 对象，其中包含有关元素在视口中的大小和位置的信息。

DOMRect 对象在返回时包含一个包含整个元素的小矩形，其中包括填充和边框宽度。

左、上、右、下、x、y、宽度和高度等属性用于定义整个矩形的位置，以及以像素为单位的大小。获得的值与视口的左上角有关，宽度和高度除外。

例如，

let elem = document.querySelector('div');
let rect = elem.getBoundingClientRect();
console.log("x: "+ rect.x);
console.log("y: "+ rect.y);

在 JavaScript 中使用 offsetTop 属性获取元素的位置

它返回相对于 offsetParent 元素顶部的顶部位置。我们可以创建一个函数来返回这些坐标。

例如，

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
          _x += el.offsetLeft - el.scrollLeft;
          _y += el.offsetTop - el.scrollTop;
          el = el.offsetParent;
    }
    return { top: _y, left: _x };
    }
var x = getOffset( document.getElementById('div') ).left;
var y = getOffset( document.getElementById('div') ).top;
console.log("x: "+ x);
console.log("y: "+ y);