JavaScript는 웹 페이지, 브라우저, 화면 높이 및 width_javascript 팁 요약을 가져옵니다.

JavaScript를 작성할 때 레이아웃 위치 문제를 해결하기 위해 웹페이지, 브라우저 또는 화면의 높이와 너비를 사용해야 한다는 사실을 자주 발견합니다. 이전에 사용한 후 잊어버리거나 그냥 검색해 보는 경우가 있습니다. 그래서 제가 직접 요약해서 다시 사용하기도 편하고 시간과 노력도 절약됩니다.

웹페이지의 표시 영역 너비: document.body.clientWidth
웹 페이지의 가시 영역 높이: document.body.clientHeight
웹 페이지의 가시 영역 너비: document.body.offsetWidth (가장자리 너비 포함)
웹 페이지의 가시 영역 높이 : document.body.offsetHeight (가장자리 너비 포함)
웹 페이지 본문의 전체 텍스트 너비: document.body.scrollWidth(스크롤 막대가 포함된 너비)
웹 페이지 본문의 전체 텍스트 높이: document.body.scrollHeight(스크롤 막대가 포함된 높이)
페이지가 너무 높게 스크롤되었습니다: document.body.scrollTop
스크롤되는 웹페이지의 왼쪽: document.body.scrollLeft
웹페이지 본문: window.screenTop
웹페이지 텍스트 왼쪽 부분: window.screenLeft
높은 화면 해상도: window.screen.height
화면 해상도 너비: window.screen.width
화면 사용 가능 작업 공간 높이: window.screen.availHeight
화면 사용 가능 작업 공간 너비: window.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 = 너비 패딩
clientHeight = 높이 패딩
offsetWidth = 너비 패딩 테두리
offsetHeight = 높이 패딩 테두리

IE5.0/5.5:

코드 복사 코드는 다음과 같습니다.

clientWidth = 너비 - 테두리
clientHeight = 높이 - 테두리
offsetWidth = 너비
오프셋 높이 = 높이

요약: 높이와 너비에 대해 몇 가지 사항이 이해가 되지 않습니다. 직접 테스트해 본 결과 일부 값이 동일하므로 매우 혼란스럽습니다. 상황에 따라 다릅니다.