HTML 문서 종류에 대한 자세한 설명 권장_HTML/Xhtml_웹페이지 제작

내 형식은 다음과 같습니다.

블로그 파크:

HTML 문서 유형 참조 정보: http://i.wanz.im/2010/05/28/why_doctype_html/

JS에서 얻은 현재 페이지의 시각적 크기와 페이지의 스크롤 위치에 차이가 있는 것을 확인했습니다!
페이지에 2000*2000 DIV가 포함되어 있습니다. IE와 Chrome에서 다양한 HTML 문서 유형으로 컴파일한 데이터는 다음과 같습니다.
표준:
특수:

HTML 문서 유형이 HTML에 추가되지 않은 경우 기본적으로 특수 모드로 설정됩니다!

	Chrome标准	Chrome特殊	IE标准	IE特殊
document.body.clientTop;	0	0	0	2
document.body.clientLeft;	0	0	0	2
document.body.clientWidth;	473	473	471	471
document.body.clientHeight;	2000	625	2000	604
document.body.scrollTop;	224	289	0	255
document.body.scrollLeft;	315	388	0	278
document.body.scrollWidth;	2005	2005	2005	2010
document.body.scrollHeight;	2010	2010	2000	2005
document.body.offsetTop;	0	0	0	0
document.body.offsetLeft;	0	0	0	0
document.body.offsetWidth;	473	473	471	492
document.body.offsetHeight;	2000	2000	2000	625
document.documentElement.clientTop;	0	0	0	0
document.documentElement.clientLeft;	0	0	0	0
document.documentElement.clientWidth;	473	473	471	0
document.documentElement.clientHeight;	625	2010	604	0
document.documentElement.scrollTop;	0	0	199	0
document.documentElement.scrollLeft;	0	0	241	0
document.documentElement.scrollWidth;	2005	2005	2005	492
document.documentElement.scrollHeight;	2010	2010	2010	625
document.documentElement.offsetTop;	0	0	0	0
document.documentElement.offsetLeft;	0	0	0	0
document.documentElement.offsetWidth;	473	473	492	492
document.documentElement.offsetHeight;	2010	2010	625	625

분석:

총 페이지 너비: document.body.scrollWidth;
총 페이지 높이: document.body.scrollHeight;
Chrome 페이지 위치: document.body.scrollTop; document.body.scrollLeft;
Chrome 표준 페이지 표시 영역: document.documentElement.clientHeight;
Chrome 특수 페이지 표시 영역: document.body.clientHeight;
IE 표준 페이지 위치: document.documentElement .scrollTop ; document.documentElement.scrollLeft;
IE 표준 페이지 표시 영역: document.documentElement.clientHeight;
IE 특수 페이지 위치: document.body.scrollTop ;
IE 특별 페이지의 보이는 영역: document.body.clientWidth;
JS 코드는 다음과 같습니다:

코드 복사

코드는 다음과 같습니다.

function getSize() {
var obj = new Object()
obj.allWidth = document.body.scrollWidth;
obj.allHeight = document.body.scrollHeight;
if (-[1, ]) { //IE가 아님
obj.top = document. body.scrollTop;
obj.left = document.body.scrollLeft;
if (document.compatMode === 'CSS1Compat') {
obj.width = document.documentElement.clientWidth; .height = document.documentElement .clientHeight;
}
else {
obj.width = document.body.clientWidth;
obj.height = document.body.clientHeight; >} else {
if (document.compatMode === 'CSS1Compat') {
obj.width = document.documentElement.clientWidth;
obj.height = document.documentElement.clientHeight
obj; .top = document.documentElement .scrollTop;
obj.left = document.documentElement.scrollLeft;
}
else {
obj.width = document.body.clientWidth; = document.body.clientHeight ;
obj.top = document.body.scrollTop;
obj.left = document.body.scrollLeft;
}
alert(obj.top) ;
alert(obj.left);
alert(obj.height)
return obj; 참고: Discovery Blog Park 홈 페이지 HTML 문서 유형은 다음과 같습니다.

에세이 표시 페이지와 왜 다른가요?

재인쇄를 환영합니다. 다음을 표시해 주세요. [ http://www.cnblogs.com/zjfree/ ]에서 재인쇄됨