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)文章
JS實(shí)現(xiàn)圖片預(yù)加載無(wú)需等待
網(wǎng)站開(kāi)發(fā)時(shí)經(jīng)常需要在某個(gè)頁(yè)面需要實(shí)現(xiàn)對(duì)大量圖片的瀏覽;用javascript來(lái)實(shí)現(xiàn)一個(gè)圖片瀏覽器，讓用戶無(wú)需等待過(guò)長(zhǎng)的時(shí)間就能看到其他圖片2012-12-12
IE8中jQuery.load()加載頁(yè)面不顯示的原因
這篇文章主要介紹了IE8中jQuery.load()加載頁(yè)面不顯示的原因，在文中給大家介紹了jquery中l(wèi)oad()方法的使用要點(diǎn),需要的朋友可以參考下2018-11-11
Google 靜態(tài)地圖API實(shí)現(xiàn)代碼
Google 靜態(tài)地圖 文檔說(shuō)的很詳細(xì)，這里就不在啰嗦了！2010-11-11
ligerUI---ListBox(列表框可移動(dòng)的實(shí)例)
下面小編就為大家分享一篇ligerUI---ListBox(列表框可移動(dòng)的實(shí)例)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要為大家詳細(xì)介紹了原生JS仿QQ閱讀點(diǎn)擊展開(kāi)、收起效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)通訊錄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了瀏覽器窗口加載和大小改變事件,需要的朋友可以參考下2014-02-02
小程序中this.setData的使用和注意事項(xiàng)
這篇文章主要介紹了微信小程序中this.setData的使用和注意事項(xiàng),非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
用js控制select的方法，大家可以參考下2008-06-06
JavaScript從數(shù)組(數(shù)組對(duì)象)中刪除特定數(shù)據(jù)的方法
這篇文章主要給大家介紹了關(guān)于JavaScript從數(shù)組(數(shù)組對(duì)象)中刪除特定數(shù)據(jù)的相關(guān)資料,js在前臺(tái)界面中舉足輕重,在使用js刪除數(shù)組時(shí)遇到一些問(wèn)題,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09