1. DOM 노드의 크기
ㅇ 컨텐츠 + 패딩 + 스크롤바 + 경계선: offsetHeight, offsetWidth
- getBoundingClientRect().height, getBoundingClientRect().width
* getBoundingClientRect()
. height,width,top,bottom,x,y,left,right 픽셀 수 속성을 가진 객체를 반환
* 스크롤바 요소는, 웹브라우저나 디바이스 마다 다르게, 공간을 차지할 수 있어서 주의 요함
ㅇ 컨텐츠 + 패딩 : clientHeight, clientWidth
ㅇ 보이는 컨텐츠 크기 : getComputedStyle().height, getComputedStyle().width
ㅇ 실제 컨텐츠 크기 + 패딩 : scrollHeight, scrollWidth
2. DOM 노드의 위치
ㅇ 화면 상단 ~ 요소 top 경계선 : getBoundingClientRect().top
ㅇ 화면 상단 ~ 요소 bottom 경계선 : getBoundingClientRect().bottom
ㅇ 부모 경계선 ~ 요소 top 경계선 : offsetTop
ㅇ 부모 경계선 ~ 요소 bottom 경계선 : offsetBottom
ㅇ 브라우저 창 끝(스크롤바 무시) ~ 클라이언트 영역 : clientX, clientY
ㅇ 실제 모니터 화면 끝(스크롤바 무시) ~ 클라이언트 영역 : screenX, screenY
ㅇ 실제 페이지 끝(안보이는 곳 포함) ~ 클라이언트 영역 : pageX, pageY
※ [참고_웹] ☞ javascript.info (요소 사이즈와 스크롤)