HTML文檔類型詳解推薦

2020-03-24 18:01:43

字體：大中小

來源：轉載

供稿：網友

我的是： !DOCTYPE html 博客園： !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN 關于HTML文檔類型參考：http://i.wanz.im/2010/05/28/why_doctype_html/檢查發現JS在獲取當前頁面可視大小，和頁面滾動位置有差別！
在頁面包含一個2000*2000的DIV是IE和Chrome在不同HTML文檔類型測試整理數據如下：
標準： !DOCTYPE html
特殊： !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN 當HTML中未添加HTML文檔類型時，默認為特殊模式！
分析：頁面總寬度：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;
}

注：發現博客園首頁的HTML文檔類型為：
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
為什么和隨筆展示頁不一樣呢？

歡迎轉載，轉載請注明：轉載自[ http://www.cnblogs.com/zjfree/ ]
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html中單選框樣式自定義的示例

下一篇：HTML5的結構和語義(2)-結構