[JavaScript] 크기값 구하기

✅ 요소의 크기

clientWidth / clientHeight

 요소.clientWidth 

: 요소의 border를 제외한 padding까지의 너비(높이)를 반환한다.

- padding만 포함하여 계산한다.

scrollWidth / scrollHeight

 요소.scrollWidth 

: 화면에 보이는 것과 상관없이 실제 컨텐츠 영역의 너비(높이)를 반환한다.

- padding을 포함한 화면 상에 표시되지 않은 숨겨진 영역까지 포함하여 계산한다.

offsetWidth / offsetHeight

 요소.offsetWidth 

: 요소의 margin을 제외한 border까지의 너비(높이)를 반환한다.

- padding, border, 세로(가로)스크롤바를 포함하여 계산한다.

 

👉 참고 : http://jsfiddle.net/y8Y32/25/

 

✅ 윈도우 창의 크기

window.innerWidth / innerHeight

: 스크롤바를 포함하지 않은 브라우저 화면의 너비(높이)

- 스크롤바 상단바, 개발자도구를 제외한 화면만을 계산한다.

window.outerWidth / outerHeight

: 스크롤바를 포함한 브라우저 전체의 너비(높이)