HTML文本文档种类详解 强烈推荐

我的是:<!DOCTYPE html>

blog园:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

有关HTML文本文档种类参照:http://i.wanz.im/2010/05/28/why_doctype_html/

查验发现JS在获得当今网页页面可视性尺寸,和网页页面翻转部位有区别!
在网页页面包括1个2000*2000的DIV是IE和Chrome在不一样HTML文本文档种类检测梳理数据信息以下:
规范:<!DOCTYPE html>
独特:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

当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.clientWidth; document.documentElement.clientHeight;
Chrome独特网页页面可视性地区:document.body.clientWidth; document.body.clientHeight;
IE规范网页页面部位:document.documentElement.scrollTop; document.documentElement.scrollLeft;
IE规范网页页面可视性地区:document.documentElement.clientWidth; document.documentElement.clientHeight;
IE独特网页页面部位:document.body.scrollTop; document.body.scrollLeft;
IE独特网页页面可视性地区:document.body.clientWidth; document.body.clientHeight;
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;
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;
}

注:发现blog园主页的HTML文本文档种类为:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
为何和随笔展现页不1样呢?

欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ]