前言

今天主要講的會分成兩個部分，分別是

  1. offset 系列
  2. client 系列

然後這兩種都會個別擁有Left、Top、Width和Height。

但今天如果我想獲得元素本身的寬度時，知道是要Width，但是要用 offset 系列還是 client 系列是會讓人感到困惑的。

會遇到的問題像是說：
offsetLeft 跟 clientLeft 差在哪裡？
offsetTop 跟 clientTop 差在哪裡？

以下直接列出我整理後的重點。

Width / Height

  • offsetWidth / offsetHeight 是「元素本身」的寬度/高度 (包括 border)

  • clientWidth / clientHeight 是「元素本身」的寬度/高度 (不包括 border)

可以發現其實這兩者只差在有沒有包括border。

Left / Top

  • offsetLeft / offsetTop 是元素本身相對於母元素的水平/垂直距離。

  • clientLeft / clientTop 是元素本身內外的水平/垂直距離(可以理解成 border)。

client 系列的是只有border的距離。

我有做一張圖方便理解：

補充

scroll 系列，可以看這篇～
https://shubo.io/element-size-scrolling/#offsetleft-offsettop