如何用jst獲取DOM元素在頁面中的絕對位置？

在 JavaScript 中，您可以使用多種方法獲取 DOM 元素在頁面中的絕對位置（相對於文件左上角）：

1. getBoundingClientRect() 方法:

這是最常用的方法，它返回一個 DOMRect 物件，包含元素的大小和位置資訊。

const element = document.getElementById('yourElementId');
const rect = element.getBoundingClientRect();

const absoluteX = rect.left; // 元素左上角的 x 座標
const absoluteY = rect.top; // 元素左上角的 y 座標

//  rect.x 和 rect.y 在較新的瀏覽器中也可用，與 rect.left 和 rect.top 相同。

console.log('Absolute X:', absoluteX);
console.log('Absolute Y:', absoluteY);

// 其他有用的屬性：
// rect.right: 元素右下角的 x 座標
// rect.bottom: 元素右下角的 y 座標
// rect.width: 元素的寬度
// rect.height: 元素的高度

重要注意事項：

• getBoundingClientRect() 返回的位置是相對於視口的，而不是文件。如果頁面有捲軸並且滾動了一定距離，則返回的位置會受到影響。 要獲取相對於文件的絕對位置，需要考慮滾動偏移量：

const element = document.getElementById('yourElementId');
const rect = element.getBoundingClientRect();

const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

const absoluteX = rect.left + scrollLeft;
const absoluteY = rect.top + scrollTop;

console.log('Absolute X (with scroll):', absoluteX);
console.log('Absolute Y (with scroll):', absoluteY);

• getBoundingClientRect() 的效能開銷相對較低，但頻繁呼叫仍然可能影響效能，尤其是在動畫或頻繁更新的場景中。

2. offsetTop 和 offsetLeft 屬性:

這兩個屬性可以獲取元素相對於其 offsetParent 元素的左上角座標。offsetParent 指的是最近的定位祖先元素（position 屬性值為 relative, absolute, fixed 或 sticky 的元素），如果沒有定位祖先元素，則 offsetParent 為 body 元素（在某些瀏覽器中可能是 null）。

要獲取元素相對於文件的絕對位置，需要遞迴向上遍歷所有祖先元素，並將它們的偏移量累加起來。

function getAbsolutePosition(element) {
  let x = 0;
  let y = 0;
  while (element) {
    x += element.offsetLeft;
    y += element.offsetTop;
    element = element.offsetParent;
  }
  return { x, y };
}

const element = document.getElementById('yourElementId');
const position = getAbsolutePosition(element);

console.log('Absolute X:', position.x);
console.log('Absolute Y:', position.y);

注意:

• 這種方法的效能開銷比 getBoundingClientRect() 高，因為它需要遍歷 DOM 樹。
• 它不考慮滾動偏移量，如果需要考慮滾動，需要手動加上 window.pageXOffset 和 window.pageYOffset。

選擇哪種方法？

一般情況下，推薦使用 getBoundingClientRect() 方法，因為它更簡潔、效能更好。如果需要相容非常老的瀏覽器，或者需要獲取相對於特定祖先元素的位置，則可以使用 offsetTop 和 offsetLeft。 記住處理滾動偏移量以獲得正確的絕對位置。