使用 JavaScript 獲取元素的位置

Kushank Singh 2023年1月30日 2022年5月11日
  1. 在 JavaScript 中使用 Element.getBoundingClientRect() 函式獲取元素的位置
  2. 在 JavaScript 中使用 offsetTop 屬性獲取元素的位置
使用 JavaScript 獲取元素的位置

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

相關文章 - JavaScript DOM