了解DOM元素尺寸及位置

JavaScript DOM

Word count: 384Reading time: 1 min

 2023/06/19 

在JS取得元素寬度及高度，有三組鼠性可以用，分別是offset、client、scroll

取得元素尺寸

offsetWidth、offsetHeight

offsetWidth/offsetHeight 是「元素本身」的寬度/高度，並完整了包含了邊界、捲軸及padding。

Untitled

clientWidth、clientHeight

clientWidth, clientHeight 是元素所包含的「子元素」的寬度及高度，其中包含了padding，但不包含邊界及捲軸。

Untitled

scrollWidth、scrollHeight

scrollWidth/scrollHeight 也是元素所包含的「子元素」的「完整」寬度和高度，其中包含了超出捲軸之外的部分的寬度與高度。在沒有捲軸的情況下，這個值就等於 clientWidth/clientHeight。

取得元素相對位置

與尺寸大小相同，也有三組屬性可以用，分別是offset、client、scroll。

offsetLeft、offsetTop

相對於父元素的水平/垂直距離。

clientLeft、clientTop

等同於元素的border寬度

有scroll的情況下，包含scroll寬度。

scrollLeft、scrollTop

內容頂端和捲軸頂端的相對距離。

取得元素絕對位置

要取得絕對位置(相對於文檔左上角)，可以使用offsetLeft和offsetTop與父元素迭代相加，直到到達根元素為止。

function getAbsolutePosition(element) {
  var left = element.offsetLeft;
  var top = element.offsetTop;

  while (element.offsetParent) {
    element = element.offsetParent;
    left += element.offsetLeft;
    top += element.offsetTop;
  }

  return { left: left, top: top };
}

// 例子使用：
var element = document.getElementById("myElement");
var position = getAbsolutePosition(element);

console.log("元素的绝对左坐标：" + position.left + "px");
console.log("元素的绝对上坐标：" + position.top + "px");

來源

https://shubo.io/element-size-scrolling/

補充

offset請聯想到父元素

Next Post

Vue console.log 由flag判斷要不要顯示
Previous Post

Typescript 任意屬性

CATALOG

1. 取得元素尺寸
2. 取得元素相對位置
3. 取得元素絕對位置
4. 來源
5. 補充