欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML文檔類型詳解 推薦

  發(fā)布時(shí)間：2010-10-29 22:07:58   作者：佚名   我要評論
昨天給添加了在線測試效果！打開后發(fā)現(xiàn)JS彈出框位置和效果不對！但是我在我本地測試是沒問題的！仔細(xì)檢查后發(fā)現(xiàn)原來是由于博客園的HTML文檔類型和我的不一樣。

我的是：<!DOCTYPE html>

博客園：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

關(guān)于HTML文檔類型參考：http://i.wanz.im/2010/05/28/why_doctype_html/

檢查發(fā)現(xiàn)JS在獲取當(dāng)前頁面可視大小，和頁面滾動(dòng)位置有差別！
在頁面包含一個(gè)2000*2000的DIV是IE和Chrome在不同HTML文檔類型測試整理數(shù)據(jù)如下：
標(biāo)準(zhǔn)：<!DOCTYPE html>
特殊：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

當(dāng)HTML中未添加HTML文檔類型時(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

分析：

頁面總寬度：document.body.scrollWidth;
頁面總高度：document.body.scrollHeight;
Chrome頁面位置：document.body.scrollTop; document.body.scrollLeft;
Chrome標(biāo)準(zhǔn)頁面可視區(qū)域：document.documentElement.clientWidth; document.documentElement.clientHeight;
Chrome特殊頁面可視區(qū)域：document.body.clientWidth; document.body.clientHeight;
IE標(biāo)準(zhǔn)頁面位置：document.documentElement.scrollTop; document.documentElement.scrollLeft;
IE標(biāo)準(zhǔn)頁面可視區(qū)域：document.documentElement.clientWidth; document.documentElement.clientHeight;
IE特殊頁面位置：document.body.scrollTop; document.body.scrollLeft;
IE特殊頁面可視區(qū)域：document.body.clientWidth; document.body.clientHeight;
JS代碼如下：

復(fù)制代碼
代碼如下:

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)博客園首頁的HTML文檔類型為：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
為什么和隨筆展示頁不一樣呢？

歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明：轉(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)簽

    這篇文章給大家介紹了html5文檔結(jié)構(gòu)標(biāo)簽的相關(guān)知識，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
    2017-04-21

  • 如何在Dreamweaver cs6 中設(shè)置默認(rèn)文檔格式為html5

    怎么設(shè)置Dreamweaver cs6 中默認(rèn)文檔格式為html5，很簡單，在編輯->首選參數(shù)中便可設(shè)置，如截圖，有需求的朋友可以參考下，希望對大家有所幫助
    2013-07-28

  • html5 跨文檔消息傳輸示例探討

    想實(shí)現(xiàn)跨文檔消息傳輸首先要對窗口對象的message事件進(jìn)行監(jiān)聽，然后使用window對象的postMessage()方法向其他窗口發(fā)送消息，接下來為大家詳細(xì)介紹下，感興趣的朋友可以參考
    2013-04-01

  • HTML5之SVG 2D入門8—文檔結(jié)構(gòu)及相關(guān)元素總結(jié)

    前面介紹了很多的基本元素，包括結(jié)構(gòu)相關(guān)的組合和重用元素，這里主要是對SVG的文檔結(jié)構(gòu)中剩下的相關(guān)元素簡單總結(jié)一下，感興趣的朋友可不要錯(cuò)過哦，然后繼續(xù)向前領(lǐng)略SVG的其
    2013-01-30

  • HTML5 與 XHTML2

    多數(shù)人使用 HTML 4 和 XHTML 1 編寫網(wǎng)頁。相對較少的 HTML 狂熱者了解語義 HTML 的概念、驗(yàn)證 HTML 結(jié)構(gòu)和改進(jì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入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-08-01

  • 在HTML文檔中嵌入CSS的三種常用方式

    在HTML中定義CSS的方式有：Embedding（嵌入式）、Linking（引用式）、Inline（內(nèi)聯(lián)式），下面通過實(shí)例為大家詳細(xì)介紹下它們的特點(diǎn)
    2014-06-04

  • html文檔中的 ol 元素的序號數(shù)字極限探討

    能在html文檔中遇到極大的ol列表可能性不大，本文只是純粹技術(shù)探討，感興趣的朋友可以了解下
    2013-10-14

  • CSS入門:XHTML文檔結(jié)構(gòu)樹

    網(wǎng)頁制作Webjx文章簡介：CSS通過與(X)HTML的文檔結(jié)構(gòu)相對應(yīng)的選擇器（selector）來達(dá)到控制頁面表現(xiàn)的目的，而文檔結(jié)構(gòu)不僅僅在CSS的應(yīng)用上非常重要，對于行為層（例如使用
    2009-04-02

最新評論