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