HTML文檔類(lèi)型詳解 推薦
我要評(píng)論我的是：<!DOCTYPE html>
博客園：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
關(guān)于HTML文檔類(lèi)型參考：http://i.wanz.im/2010/05/28/why_doctype_html/
檢查發(fā)現(xiàn)JS在獲取當(dāng)前頁(yè)面可視大小，和頁(yè)面滾動(dòng)位置有差別！
在頁(yè)面包含一個(gè)2000*2000的DIV是IE和Chrome在不同HTML文檔類(lèi)型測(cè)試整理數(shù)據(jù)如下：
標(biāo)準(zhǔn)：<!DOCTYPE html>
特殊：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
當(dāng)HTML中未添加HTML文檔類(lèi)型時(shí)，默認(rèn)為特殊模式！
| Chrome標(biāo)準(zhǔn) | Chrome特殊 | IE標(biāo)準(zhǔn) | 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 |
分析：
頁(yè)面總寬度：document.body.scrollWidth;
頁(yè)面總高度：document.body.scrollHeight;
Chrome頁(yè)面位置：document.body.scrollTop; document.body.scrollLeft;
Chrome標(biāo)準(zhǔn)頁(yè)面可視區(qū)域：document.documentElement.clientWidth; document.documentElement.clientHeight;
Chrome特殊頁(yè)面可視區(qū)域：document.body.clientWidth; document.body.clientHeight;
IE標(biāo)準(zhǔn)頁(yè)面位置：document.documentElement.scrollTop; document.documentElement.scrollLeft;
IE標(biāo)準(zhǔn)頁(yè)面可視區(qū)域：document.documentElement.clientWidth; document.documentElement.clientHeight;
IE特殊頁(yè)面位置：document.body.scrollTop; document.body.scrollLeft;
IE特殊頁(yè)面可視區(qū)域：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;
}
注：發(fā)現(xiàn)博客園首頁(yè)的HTML文檔類(lèi)型為：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
為什么和隨筆展示頁(yè)不一樣呢？
歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明：轉(zhuǎn)載自[ http://www.cnblogs.com/zjfree/ ]
相關(guān)文章
HTML5的文檔結(jié)構(gòu)和新增標(biāo)簽完全解析
這篇文章主要介紹了HTML5的文檔結(jié)構(gòu)和新增標(biāo)簽完全解析,需要的朋友可以參考下2017-04-21- 這篇文章給大家介紹了html5文檔結(jié)構(gòu)標(biāo)簽的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-04-21
如何在Dreamweaver cs6 中設(shè)置默認(rèn)文檔格式為html5
怎么設(shè)置Dreamweaver cs6 中默認(rèn)文檔格式為html5，很簡(jiǎn)單，在編輯->首選參數(shù)中便可設(shè)置，如截圖，有需求的朋友可以參考下，希望對(duì)大家有所幫助2013-07-28- 想實(shí)現(xiàn)跨文檔消息傳輸首先要對(duì)窗口對(duì)象的message事件進(jìn)行監(jiān)聽(tīng)，然后使用window對(duì)象的postMessage()方法向其他窗口發(fā)送消息，接下來(lái)為大家詳細(xì)介紹下，感興趣的朋友可以參考2013-04-01
HTML5之SVG 2D入門(mén)8—文檔結(jié)構(gòu)及相關(guān)元素總結(jié)
前面介紹了很多的基本元素，包括結(jié)構(gòu)相關(guān)的組合和重用元素，這里主要是對(duì)SVG的文檔結(jié)構(gòu)中剩下的相關(guān)元素簡(jiǎn)單總結(jié)一下，感興趣的朋友可不要錯(cuò)過(guò)哦，然后繼續(xù)向前領(lǐng)略SVG的其2013-01-30- 多數(shù)人使用 HTML 4 和 XHTML 1 編寫(xiě)網(wǎng)頁(yè)。相對(duì)較少的 HTML 狂熱者了解語(yǔ)義 HTML 的概念、驗(yàn)證 HTML 結(jié)構(gòu)和改進(jìn)文檔的可訪(fǎng)問(wèn)性。高質(zhì)量的 HTML 文檔是反復(fù)權(quán)衡、設(shè)計(jì)優(yōu)選和2008-10-17
詳解HTML編程的標(biāo)記與文檔結(jié)構(gòu)
這篇文章主要介紹了詳解HTML編程的標(biāo)記與文檔結(jié)構(gòu),是HTML入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-01- 在HTML中定義CSS的方式有：Embedding（嵌入式）、Linking（引用式）、Inline（內(nèi)聯(lián)式），下面通過(guò)實(shí)例為大家詳細(xì)介紹下它們的特點(diǎn)2014-06-04
html文檔中的 ol 元素的序號(hào)數(shù)字極限探討
能在html文檔中遇到極大的ol列表可能性不大，本文只是純粹技術(shù)探討，感興趣的朋友可以了解下2013-10-14CSS入門(mén):XHTML文檔結(jié)構(gòu)樹(shù)
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：CSS通過(guò)與(X)HTML的文檔結(jié)構(gòu)相對(duì)應(yīng)的選擇器（selector）來(lái)達(dá)到控制頁(yè)面表現(xiàn)的目的，而文檔結(jié)構(gòu)不僅僅在CSS的應(yīng)用上非常重要，對(duì)于行為層（例如使用2009-04-02