clientWidth, clientHeight, offsetWidth, offsetHeight

javascript에서는 현재 화면의 크기를 구할 때 아래와 같이 구한다.

var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;

그런데 이 때 clientWidth, clientHeight 는 스크롤바의 영역을 제외한 크기이다.

다시 말해 스크롤바가 생기느냐 생기지 않느냐에 따라 크기가 달라진다.

만약 윈도우 리사이즈 함수를 구현할 때 (window.onresize = function(){})

clientWidth, clientHeight 를 잘못 쓰면 window.onresize 무한 루프에 걸릴 수 있다.

따라서 offsetWidth, offsetHeight 를 활용하자.

var offWidth = document.documentElement.offsetWidth;
var offHeight = document.documentElement.offsetHeight;

offsetWidth, offsetHeight 는 스크롤바 영역을 포함한 크기이므로 값의 변화가 없다.