要素オブジェクトのプロパティを取得
const targetElem = document.querySelector('box');
targetElem.clientTop;
取得できるプロパティの内、要素の位置関係を示すのは以下の通りです。
- 左から
- clientLeft
- offsetLeft
- scrollLeft
- 上から
- clientTop
- offsetTop
- scrollTop
- 幅
- clientWidth
- offsetWidth
- scrollWidth
- 高さ
- clientHeight
- offsetHeight
- scrollHeight
そして、clientとoffsetとscrollの違いは次の通りです。
Left・Topプロパティ
| client | offset | scroll |
|---|
:rootのmarginを含むか | No | No | No |
:rootのborderを含むか | No | Yes | No |
:rootのpaddingを含むか | No | No | No |
| 自身のスクロール量を含むか | No | No | Yes |
| 自身のmarginを含むか | No | Yes | No |
| 自身のborderを含むか | Yes | Yes | No |
| 自身のpaddingを含むか | No | No | No |
CSSのpositionがabsoluteかfixed
| client | offset | scroll |
|---|
| ビューポートからのオフセットを含むか | No | Yes | No |
| 自身のスクロール量を含むか | No | No | Yes |
| 自身のmarginを含むか | No | Yes | No |
| 自身のborderを含むか | Yes | Yes | No |
| 自身のpaddingを含むか | No | No | No |
Width・Heightプロパティ
| client | offset | scroll |
|---|
| 自身のスクロール量を含むか | No | No | Yes |
| 自身のmarginを含むか | No | No | No |
| 自身のborderを含むか | No | Yes | No |
| 自身のpaddingを含むか | Yes | Yes | Yes |
