document.documentElement和document.body區(qū)別介紹
更新時(shí)間：2013年09月16日 10:52:22 作者：
body是DOM對(duì)象里的body子節(jié)點(diǎn)，即body標(biāo)簽，documentElement 是整個(gè)節(jié)點(diǎn)樹(shù)的根節(jié)點(diǎn)root，詳細(xì)介紹請(qǐng)看本文，感興趣的朋友可以參考下
區(qū)別：
body是DOM對(duì)象里的body子節(jié)點(diǎn)，即 <body> 標(biāo)簽；
documentElement 是整個(gè)節(jié)點(diǎn)樹(shù)的根節(jié)點(diǎn)root，即<html> 標(biāo)簽；
沒(méi)使用DTD情況即怪異模式BackCompat下：
document.documentElement.clientHeight=0document.body.clientHeight=618
使用DTD情況即標(biāo)準(zhǔn)模式CSS1Compat下：
document.documentElement.clientHeight=618 document.body.clientHeight=28(表示內(nèi)容的高度)
因此提取瀏覽器的尺寸是要注意了?？梢詤⒖家韵麓a：
if (document.compatMode == "BackCompat") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == "CSS1Compat"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
body是DOM對(duì)象里的body子節(jié)點(diǎn)，即 <body> 標(biāo)簽；
documentElement 是整個(gè)節(jié)點(diǎn)樹(shù)的根節(jié)點(diǎn)root，即<html> 標(biāo)簽；
沒(méi)使用DTD情況即怪異模式BackCompat下：
復(fù)制代碼 代碼如下:
document.documentElement.clientHeight=0document.body.clientHeight=618
使用DTD情況即標(biāo)準(zhǔn)模式CSS1Compat下：
復(fù)制代碼 代碼如下:
document.documentElement.clientHeight=618 document.body.clientHeight=28(表示內(nèi)容的高度)
因此提取瀏覽器的尺寸是要注意了?？梢詤⒖家韵麓a：
復(fù)制代碼 代碼如下:
if (document.compatMode == "BackCompat") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == "CSS1Compat"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
相關(guān)文章
解決bootstrap模態(tài)框數(shù)據(jù)緩存的問(wèn)題方法
今天小編就為大家分享一篇解決bootstrap模態(tài)框數(shù)據(jù)緩存的問(wèn)題方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了js控制表單不能輸入空格的小例子，有需要的朋友可以參考一下2013-11-11
JavaScript數(shù)組實(shí)現(xiàn)扁平化四種方法詳解
扁平化，顧名思義就是減少?gòu)?fù)雜性裝飾，使其事物本身更簡(jiǎn)潔、簡(jiǎn)單，突出主題。數(shù)組扁平化，對(duì)著上面意思套也知道了，就是將一個(gè)復(fù)雜的嵌套多層的數(shù)組，一層一層的轉(zhuǎn)化為層級(jí)較少或者只有一層的數(shù)組2022-10-10
javascript實(shí)現(xiàn)點(diǎn)擊按鈕切換圖片
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
JavaScript實(shí)現(xiàn)批量重命名文件
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)批量重命名文件,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
這篇文章主要介紹JavaScript的三種this指向的方法：call()、bind()、apply()，文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
用了bootstrap模版搭建的網(wǎng)站，在IE7中打不開(kāi)，在IE8中背景圖片都不顯示，內(nèi)容排列也出現(xiàn)問(wèn)題，在IE9中表現(xiàn)的最好，在IE11中出現(xiàn)彈出層中的圖片無(wú)法顯示，那么這些兼容性怎么去解決2015-10-10
這篇文章主要介紹了JS實(shí)現(xiàn)左邊列表移到到右邊列表功能,實(shí)現(xiàn)功能主要是左邊的下拉框內(nèi)容添加到右邊的下拉框，支持多選移動(dòng)，且同時(shí)將右邊的下拉框?qū)ο笠瞥?，需要的朋友可以參考?/div> 2018-03-03
HTML+JS模擬實(shí)現(xiàn)QQ下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+JavaScript模擬實(shí)現(xiàn)QQ中的下拉菜單效果。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下2022-05-05
這篇文章主要為大家詳細(xì)介紹了JS+css3實(shí)現(xiàn)幻燈片輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08最新評(píng)論