要素オブジェクトのプロパティを取得
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 |