Home >Web Front-end >HTML Tutorial >Detailed explanation of HTML document types Recommended_HTML/Xhtml_Web page production

Detailed explanation of HTML document types Recommended_HTML/Xhtml_Web page production

WBOY
WBOYOriginal
2016-05-16 16:41:411374browse

Mine is:

Blog Park:

About HTML document type reference: http://i.wanz.im/2010/05/28/why_doctype_html/

I checked and found that there is a difference between the visual size of the current page obtained by JS and the scroll position of the page!
The page contains a 2000*2000 DIV. The data compiled by IE and Chrome on different HTML document types are as follows:
Standard:
Special:

When the HTML document type is not added to HTML, it defaults to special mode!

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

Analysis:

Total page width: document.body.scrollWidth;
Total page height: document.body.scrollHeight;
Chrome page position: document.body.scrollTop; document.body.scrollLeft;
Chrome standard Page visible area: document.documentElement.clientWidth; document.documentElement.clientHeight;
Chrome special page visible area: document.body.clientWidth; document.body.clientHeight;
IE standard page position: document.documentElement .scrollTop; document.documentElement.scrollLeft;
IE standard page visible area: document.documentElement.clientWidth; document.documentElement.clientHeight;
IE special page position: document.body.scrollTop; document.body.scrollLeft ;
Visible area of ​​IE special page: document.body.clientWidth; document.body.clientHeight;
The JS code is as follows:

Copy code
The code is as follows:

function getSize() {
var obj = new Object();
obj.allWidth = document.body.scrollWidth;
obj.allHeight = document.body.scrollHeight;
if (-[1, ]) { //Non-IE
obj.top = document.body.scrollTop;
obj.left = document.body.scrollLeft;
if (document.compatMode === 'CSS1Compat') {
obj.width = document.documentElement.clientWidth;
obj.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;
obj.height = document.body.clientHeight ;
obj.top = document.body.scrollTop;
obj.left = document.body.scrollLeft;
}
}
alert(obj.top);
alert( obj.left);
alert(obj.width);
alert(obj.height);
return obj;
}

Note: Discovery Blog Park Home Page The HTML document type is:

Why is it different from the essay display page?

Welcome to reprint, please indicate: Reprinted from [ http://www.cnblogs.com/zjfree/ ]
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn