[Javascript] 요소 사이즈와 스크롤

기하 프로퍼티

offsetParent  /  offsetLeft  /  offsetTop

✔️ offset은 요소가 화면에서 차지하는 영역 전체 크기를 나타냄.

✔️ 요소의 너비 + padding + 스크롤바 + 테두리를 합친 크기

✔️ margin 포함 ❌

 

offsetParent

좌표 계산에 사용되는 가장 가까운 조상 요소의 참조를 반환

 

offsetLeft/offsetTop

offsetParent를 기준으로 각각 요소가 오른쪽, 아래쪽으로 얼마나 떨어져 있는지를 나타낸다.

 

 

offsetWidth  /  offsetHeight

✔️ 테두리를 포함한 요소 전체의 사이즈 정보를 제공

 

---

clientTop  /  clinetLeft

✔️ 요소의 테두리(border)의 값을 반환한다.

 

 

clientWidth  /  clienthHeight

✔️ 테두리 안 영역의 사이즈 정보를 제공

✔️ 콘텐츠 + 패딩값

📌 스크롤바 너비는 포함하지 않기때문에, 스크롤로 가려진 너비를 구하기 위해서는 아래 scrollWidth/Height를 사용해야 한다.

 

 

---

scrollWidth  /  scrollHeight

✔️ clientWidth/Height에서 스크롤바 의해 감춰진 영역도 포함한다.

 

scrollLeft  /  scrollTop

✔️스크롤바가 오른쪽, 아래로 움직임에 따라 가려지게 되는 요소 콘텐츠의 너비와 높이