js는 웹페이지 높이(세부 배열)_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

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

<script> getInfo() <br> { <br>var s = ""; <br>s = "웹페이지의 표시 영역 너비:" document.body.clientWidth = "높이 웹 페이지의 표시 영역:" document.body.clientHeight; <br>s = "웹 페이지의 표시 영역 너비: " document.body.offsetWidth "(문서의 너비 포함) 가장자리 및 스크롤 막대)"; <br>s = " 웹페이지의 표시 영역 높이: " document.body.offsetHeight "(가장자리 너비 포함)" ; <br>s = " 웹 페이지 전체 텍스트의 너비:" document.body.scrollWidth; <br>s = "웹 페이지 전체 텍스트의 높이:" document.body.scrollHeight; <br>s = "웹 페이지의 전체 텍스트 높이:" 스크롤된 웹 페이지(ff): " document.body.scrollTop; <br>s = " 웹 페이지가 스크롤되는 높이(예:): " document.documentElement.scrollTop; <br>s = " 왼쪽 웹페이지가 스크롤되는 부분: " document.body .scrollLeft; <br>s = "웹페이지의 상단 텍스트 부분:" window.screenTop; <br>s = "웹페이지의 텍스트 부분의 왼쪽 부분:" window.screenLeft; <br>s = "높은 화면 해상도:" window.screen.height; <br>s = "화면 해상도 너비:" <br>s = "화면 사용 가능한 작업 공간 높이:" window.screen.availHeight; <br>s = "사용 가능한 화면 작업 공간 너비: " window.screen.availWidth; <br>s = " 화면 설정은 " window.screen.colorDepth " 비트 색상 "입니다. " 화면 설정은 " window.screen.deviceXDPI " 픽셀/인치" <br>//alert (s) <br>getInfo() <br></script> 🎜>
내 로컬 테스트에서:

document.body.clientWidth
document.body.clientHeight
를 사용하여 IE, FireFox 및 Opera에서 얻을 수 있습니다. 매우 간단하고 편리합니다. .
회사 프로젝트에서:
Opera는 여전히
document.body.clientWidth
document.body.clientHeight
를 사용하지만 IE와 FireFox는
document.documentElement.clientWidth
document를 사용합니다. documentElement.clientHeight
W3C 표준이 문제를 일으키는 것으로 밝혀졌습니다


이 태그 줄을 페이지에 추가하는 경우
IE:
document.body.clientWidth ==> BODY 개체 너비
document.body.clientHeight ==>gt; BODY 개체 높이
document.documentElement.clientWidth ==> 표시 영역 너비
documentElement.clientHeight ==> 표시 영역 높이
FireFox:
document.body.clientWidth ==> BODY 객체 너비
document.body.clientHeight ==> 객체 높이
document.documentElement.clientWidth ==> 표시 영역 너비
document.documentElement.clientHeight ==> 표시 영역 높이
?
Opera에서document.body.clientWidth ==> 표시 영역 너비
document.body.clientHeight ==> 표시 영역 높이
document.documentElement.clientWidth ==> 페이지 개체 너비(예: BODY 개체 너비 + 여백) width)
document.documentElement.clientHeight ==> 페이지 개체 높이(즉, BODY 개체 높이 + 여백 높이)
W3C 표준이 정의되지 않은 경우

IE는 0 = => 페이지 개체 너비(즉, BODY 개체 너비 + Margin 너비) document.documentElement.clientHeight ==> 페이지 개체 높이(즉, BODY 개체 높이 + Margin 높이) Opera는
:
document.documentElement.clientWidth ==> 페이지 개체 너비(예: BODY 개체 너비 + 여백 너비) document.documentElement.clientHeight ==>; 페이지 개체 높이(예: BODY 개체 높이 + 여백 높이)
정말 귀찮은 일입니다. 사실 개발 관점에서는 개체와 메소드가 적고 최신 표준을 사용하지 않는 것이 훨씬 편리할 것입니다. 페이지 하단을 가져와야 하는 경우 HTML 표준에서는 document.body.clientHeight를 사용합니다. (이 문장은 본문의 실제 내용이 아무리 높아도 전체 페이지의 높이를 얻을 수 있습니다. 예를 들어 1074* 768의 해상도에서 페이지를 최대화하면 높이는 약 720입니다. 페이지에 "hello world"라는 문장이 하나만 있어도 여전히 720입니다. 그러나 XHTML의 경우 본문에 한 줄만 있으면 document.body.clientHeight는 해당 행의 높이(약 20px)만 가져올 수 있습니다. 전체 페이지의 높이를 가져오려면 document.documentElement를 사용해야 합니다. clientHeight.
이유는 HTML에서는 body가 전체 DOM의 루트이지만 XHTML에서는 document가 루트이고 body는 더 이상 루트가 아니기 때문에 body의 속성을 가져올 때 다음을 수행할 수 있습니다. 더 이상 전체 페이지의 값을 얻지 못합니다.
이전 표준과 새 표준의 차이점은
:


전자는 페이지가 이전 표준을 사용함을 나타내고 후자는 페이지가 새 표준을 사용함을 나타냅니다.


요약



코드 복사
대신 XHTML에서 document.documentElement.clientHeight를 사용하세요.

document.body.clientHeight