javascript_javascript 기술을 사용하여 웹 페이지 너비와 높이를 얻는 방법 요약

document.body.clientWidth - 웹페이지의 표시 영역 너비
document.body.clientHeight - 웹 페이지의 가시 영역 높이

document.body.offsetWidth - 가장자리 및 스크롤 막대의 너비를 포함한 웹페이지의 표시 영역 너비
document.body.offsetHeight - 가장자리 및 스크롤 막대의 높이를 포함한 웹 페이지의 가시 영역 높이 [FF, chrom은 전체 페이지의 높이, IE Opera는 일반]

document.body.scrollWidth - 웹페이지의 전체 너비
document.body.scrollHeight - 웹페이지의 전체 높이

document.body.scrollTop - 스크롤바가 있는 경우 스크롤바를 아래로 드래그하고 위에 표시되지 않는 부분의 높이
document.body.scrollLeft - 위와 동일

window.innerHeight - 브라우저 창의 내부 높이

window.innerWidth - 브라우저 창의 내부 너비

window.screenLeft - 웹페이지 텍스트의 왼쪽 부분[웹페이지 문서의 가장 왼쪽과 화면의 가장 왼쪽 사이의 거리인데 FF는 이를 지원하지 않으므로 Chrom, IE, Opera는 다르게 동작하므로 사용하세요. 주의하세요]
window.screen.height - 화면 해상도의 높이

window.screen.width - 화면 해상도의 너비

window.screen.availHeight - 사용 가능한 작업 영역 높이 [전체 화면, 하단 작업 표시줄 제외]

window.screen.availWidth - 사용 가능한 작업 영역 너비[전체 화면 너비]

window.screen.clorDepth - 화면 색상, 일반적으로 사용되는 16비트, 32비트 등

window.screen.deviceXDPI - 화면 픽셀/인치 [IE에서는 지원, 다른 곳에서는 지원되지 않음]

페이지 너비와 높이를 가져오는 JavaScript 방법

<script>
function getInfo()
{
  var s = "";
  s += " 网页可见区域宽："+ document.body.clientWidth;
  s += " 网页可见区域高："+ document.body.clientHeight;
  s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
  s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
  s += " 网页正文全文宽："+ document.body.scrollWidth;
  s += " 网页正文全文高："+ document.body.scrollHeight;
  s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
  s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
  s += " 网页被卷去的左："+ document.body.scrollLeft;
  s += " 网页正文部分上："+ window.screenTop;
  s += " 网页正文部分左："+ window.screenLeft;
  s += " 屏幕分辨率的高："+ window.screen.height;
  s += " 屏幕分辨率的宽："+ window.screen.width;
  s += " 屏幕可用工作区高度："+ window.screen.availHeight;
  s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
  s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
  s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
  //alert (s);
}
getInfo();
</script>

내 로컬 테스트에서:

IE, FireFox 및 Opera에서 사용할 수 있습니다

document.body.clientWidth
document.body.clientHeight

지금 바로 받으실 수 있습니다. 매우 간단하고 편리합니다.

그리고 회사 프로젝트 중:
Opera는 여전히
를 사용합니다.

document.body.clientWidth
document.body.clientHeight

그러나 IE와 FireFox는

document.documentElement.clientWidth
document.documentElement.clientHeight

문제를 일으키는 것은 W3C의 표준인 것으로 밝혀졌습니다

cf2026be466abe600f9541b29a8aa0bc 이 태그 줄을 페이지에 추가하면
IE에서:

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

FireFox에서:

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

오페라에서:

document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

그리고 정의된 W3C 표준이 없다면

IE는:

document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox 소개:

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

document.documentElement.clientWidth ==> , BODY 객체 너비 + 상단 여백 너비)

document.documentElement.clientHeight ==> 페이지 개체 높이(즉, BODY 개체 높이 + 여백 높이)

오페라란:

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

document.documentElement.clientWidth ==> (예: BODY 개체 너비에 여백 너비를 더한 값)

document.documentElement.clientHeight ==> 페이지 개체 높이(즉, BODY 개체 높이 + 여백 높이)

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.