ClientHeight, offsetHeight, scrollHeight, clientWidth, offsetWidth 및 scrollWidth 에 대한 네 가지 브라우저 해석 차이
웹 페이지의 가시 영역 폭: 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
Document.body 의 clientHeight, offsetHeight 및 scrollHeight 에 대한 네 가지 브라우저에 대한 설명을 살펴보겠습니다.
네 가지 브라우저는 각각 IE(Internet Explorer), NS(Netscape), Opera, FF(FireFox) 입니다.
ClientHeight
네 가지 브라우저는 clientHeight 의 해석에 이의가 없고, 모두 내용의 가시 영역의 높이, 즉 페이지 브라우저에서 내용을 볼 수 있는 이 영역의 높이, 일반적으로 마지막 도구 모음 이하에서 상태 표시줄 위의 이 영역까지 페이지 내용과 무관합니다.
OffsetHeight
IE, Opera 는 offsetHeight = clientHeight+스크롤 막대+테두리로 간주합니다.
NS, FF 는 offsetHeight 를 웹 콘텐츠의 실제 높이로 간주하며 clientHeight 보다 작을 수 있습니다.
ScrollHeight
IE, Opera 는 scrollHeight 를 웹 콘텐츠의 실제 높이로 간주하여 clientHeight 보다 작을 수 있습니다.
NS, FF 는 scrollHeight 가 웹 콘텐츠 높이라고 생각하지만 최소값은 clientHeight 입니다.
간단히
ClientHeight 는 브라우저를 통해 콘텐츠를 보는 영역의 높이입니다.
NS, FF 는 offsetHeight 와 scrollHeight 를 모두 웹 내용 높이로 간주하지만 웹 내용 높이가 clientHeight 보다 작거나 같은 경우 scrollHeight 값은 clientHeight 이고 offsetHeight 는 clientHeight 보다 작을 수 있습니다
IE, Opera 는 offsetHeight 를 가시 영역 clientHeight 스크롤 막대와 테두리로 간주합니다. ScrollHeight 는 웹 내용의 실제 높이입니다.
동일
ClientWidth, offsetWidth 및 scrollWidth 는 높이를 너비로 변경한다는 점을 제외하면 위와 동일하게 해석됩니다.
참고: 위와 같은 것도 돌고, 자신에 대한 참조가 있을 뿐, 어떤 값은 페이지 방식에 따라 달라질 수 있습니다! 내가 사용하는 Ajax 는 위의 방법으로 높이를 정할 수 없다!
자바스크립트 창 속성:
웹 페이지의 가시 영역 폭: 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
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 의 기준이 장난치고 있었구나
Http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd "gt;
페이지에 이 태그 행을 추가하면
IE 에서:
Document.body.clientWidth ==gt；; BODY 객체 폭
Document.body.clientheight = = gt; BODY 오브젝트 높이
Document.documentelement.clientwidth = = gt; 가시 영역 폭
Document.documentelement.clientheight = = gt; 가시 영역 높이
주: IE 에서 가시 영역은 기본적으로 body 를 인정하지 않으며 documentElement 를 사용해야 합니다! ! ! !
FireFox 에서:
Document.body.clientWidth ==gt；; BODY 객체 폭
Document.body.clientheight = = gt; BODY 오브젝트 높이
Document.documentelement.clientwidth = = gt; 가시 영역 폭
Document.documentelement.clientheight = = gt; 가시 영역 높이
Opera 에서:
Document.body.clientWidth ==gt；; 가시 영역 폭
Document.body.clientheight = = gt; 가시 영역 높이
Document.documentelement.clientwidth = = gt; 페이지 객체 너비 (즉, BODY 객체 너비+Margin 너비)
Document.documentelement.clientheight = = gt; 페이지 객체 높이 (BODY 객체 높이+Margin 높이)
창 높이 가져오기:
Var w = document.documentelement.offsetwidth;
Var h = document.documentelement.offsetheight;