使用 JavaScript 獲取元素的位置
Kushank Singh
2023年10月12日
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);