웹 페이지, 브라우저, 화면 높이 및 너비 요약

자바스크립트를 쓸 때 웹 페이지, 브라우저 또는 화면의 높이와 너비로 레이아웃 포지셔닝 문제를 해결해야 한다는 것을 자주 발견한다. 자주 전에 사용하고 잊어버리거나 인터넷 검색에서 아예 스스로 정리하면 다시 사용하기 편하고 시간을 절약할 수 있다.
웹 페이지의 가시 영역 넓이:document.body.clientWidth
웹 페이지의 가시 영역이 높습니다:document.body.clientHeight
웹 페이지의 가시 영역 넓이:document.body.offsetWidth(테두리 너비 포함)
웹 페이지의 가시 영역이 높습니다:document.body.offsetHeight(테두리 너비 포함)
웹 페이지 본문 전문 너비:document.body.scrollWidth(스크롤 바 폭 포함)
홈페이지 본문 전문 높이:document.body.scrollHeight(스크롤 바 높이 포함)
웹 페이지가 휘말린 높이:document.body.scrollTop
웹 페이지가 말아진 왼쪽:document.body.scrollLeft
웹 페이지 본문 부분: 윈도우.screenTop
웹 페이지 본문 부분 왼쪽: 윈도우.screenLeft
화면 해상도 높음: 윈도우.screen.height
화면 해상도 폭: 윈도우.screen.width
화면 사용 가능한 작업공간 높이: 윈도우.screen.availHeight
화면 사용 가능한 작업공간 폭: 윈도우.screen.availWidth
HTML 정밀 확인: scrollLeft, scrollWidth,clientWidth,offsetWidth
scrollHeight: 객체의 스크롤 높이를 가져옵니다.
scrollLeft: 대상의 왼쪽 경계와 창에서 현재 보이는 내용의 왼쪽 끝에 있는 거리를 설정하거나 가져오기
scrollTop: 대상의 맨 위쪽과 창에 보이는 내용의 맨 위에 있는 거리를 설정하거나 가져오기
scrollWidth: 객체의 스크롤 폭 가져오기
offsetHeight: 레이아웃이나 부모 좌표 offsetParent 속성에 의해 지정된 부모 좌표에 대한 객체 높이 가져오기
offsetLeft: 섹션이나 offsetParent 속성에 의해 지정된 부모 좌표에 대한 계산 왼쪽 위치를 가져옵니다.
offsetTop: 면이나 offsetTop 속성에 의해 지정된 부모 좌표의 계산 맨 위에 있는 대상을 가져옵니다.
event.clientX 상대 문서의 수평 좌표
event.clientY 상대 문서의 수직 좌표
event.offsetX 상대 용기의 수평 좌표
event.offsetY 상대 컨테이너의 수직 좌표
document.documentElement.scrollTop 수직 방향으로 스크롤하는 값
event.clientX+document.documentElement.scrollTop 상대 문서의 수평 좌표 + 수직 방향으로 스크롤하는 양
IE, FireFox 차이점은 다음과 같습니다.
IE6.0、FF1.06+:

clientWidth = width + padding 

clientHeight = height + padding 

offsetWidth = width + padding + border 

offsetHeight = height + padding + border 

IE5.0/5.5:

clientWidth = width - border 

clientHeight = height - border 

offsetWidth = width 

offsetHeight = height

총결: 높이와 너비에 관한 것이 매우 많은데 구체적인 것은 자신도 이해하지 못했다. 자신의 실험을 통해 어떤 것은 값이 같기 때문에 사람을 현혹시키고 상황을 보고 결정할 수밖에 없다.