js 웹 페이지 높이 가 져 오기 (상세 정리)

웹 페이지 보 이 는 영역 너비: document. body. client Width 웹 페이지 보 이 는 영역 높이: document. body. client Height 웹 페이지 보 이 는 영역 너비: 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

 
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(); 
 

제 로 컬 테스트 에서 IE, FireFox, Opera 에서 document. body. client Width document. body. client Height 를 사용 하면 얻 을 수 있 습 니 다. 간단 하고 편리 합 니 다.회사 프로젝트 중: Opera 는 여전히 document. body. client Width document. body. client Height 를 사용 하지만 IE 와 FireFox 는 document. document Element. client Width document. document Element. client. client Height 를 사용 합 니 다.
페이지 에 이 줄 표 시 를 추가 하면 IE 에 document. body. client Width = = > BODY 대상 너비 document. body. client Height = = > BODY 대상 높이 document. document Element. client Width = = > 보 이 는 영역 너비 document. document Element. client Height = = > 보 이 는 영역 높이 는 FireFox 에 있 습 니 다: document. body. client Width = > BODY 대상 너비 document. body.clientHeight = = > BODY 대상 높이 document. documentElement. clientWidth = = > 보 이 는 영역 너비 document. documentElement. clientHeight = = > 보 이 는 영역 높이?Opera 에서: document. body. client Width = = > 보 이 는 영역 너비 document. body. client Height = = > 보 이 는 영역 높이 document. document Element. client Width = = > 페이지 대상 너비 (즉, BODY 대상 너비 에 Margin 너비) document. document Element. client Height = = > 페이지 대상 높이 (즉, BODY 대상 높이 에 Margin 높이)IE 는: document. documentElement. clientWidth = = > 0 document. documentElement. clientHeight = = > 0 FireFox 는: document. documentElement. clientWidth = > 페이지 대상 너비 (즉, BODY 대상 너비 에 Margin 너비) document. documentElement. clientHeight = = > 페이지 대면 이미지 높이 (즉, BODY 대상 높이 에 Margin 높이)Opera: document. documentElement. client Width = = > 페이지 대상 너비 (즉, BODY 대상 너비 에 Margin 너비) document. documentElement. client Height = = > 페이지 대상 높이 (즉, BODY 대상 높이 에 Margin 높이) 는 정말 번 거 로 운 일이 다. 사실 개발 해 보면 대상 과 방법 이 적 을 지 언 정 최신 기준 을 사용 하지 않 는 것 이 훨씬 편리 하 다.페이지 의 아래쪽 을 가 져 가 야 할 때 document. body. client Height 를 사용 합 니 다. HTML 표준 에서(이 한 마디 로 전체 페이지 의 높이 를 얻 을 수 있 습 니 다. body 의 실제 내용 이 얼마나 높 든 지 간 에 1074 * 768 의 해상도, 페이지 가 최대 화 될 때 이 높이 는 약 720 입 니 다. 페이지 에 'hello World' 한 마디 만 있 더 라 도 720 을 얻 을 수 있 습 니 다. 그러나 XHTML 에서 body 체 에 한 줄 만 있 으 면 document. body. client Height 는 그 줄 의 높이, 약 20px 만 얻 을 수 있 습 니 다.이 때 전체 페이지 의 높이 를 어떻게 찾 으 려 면 document. documentElement. client Height 로 가 져 와 야 합 니 다. 이 유 는 HTML 에서 body 는 전체 DOM 의 뿌리 이 고 XHTML 에 서 는 document 이 뿌리 이 며 body 는 더 이상 뿌리 가 아니 기 때문에 body 의 속성 을 가 져 올 때 전체 페이지 의 값 을 가 져 올 수 없습니다.
신 구 기준 을 구별 하 는 줄 은: - / W3C / / DTD HTML 4.0 Transitional / EN > - / W3C / / DTD XHTML 1.0 Transitional / / EN ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 전 자 는 이 페이지 가 낡은 기준 을 사용 하고 후 자 는 이 페이지 가 새로운 기준 을 사용 하 는 것 을 가리킨다.
총괄: XHTML 에서 document. documentElement. clientHeight 로 대체