1. 程式人生 > >【轉】document.documentElement和document.body的區別

【轉】document.documentElement和document.body的區別

指定 absolut root pos absolute 使用 對象 但是 height

網頁中獲取滾動條卷去部分的高度,可以通過 document.body.scrollTop 來獲取,比如使div跟著滾動條滾動:

<div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div>
window.onscroll = function ()
{
    var div = document.getElementById("div");
    div.style.top = document.body.scrollTop + "px";
}

運行後沒有達到預期效果,輸出 document.body.scrollTop 的值一看,一直都是 0。一翻折騰,原來是 DTD 的問題,要是頁面直接用 <html> 開頭的話就沒有問題了。但是要符合 web 標準,DTD 當然是不能少的。

如果有 DTD 時用,那就用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以了。

window.onscroll = function ()
{
    var oFix = document.getElementById("divfix");
    oFix.style.top = document.documentElement.scrollTop + "px";
}




DTD相關說明:

頁面具有 DTD,或者說指定了 DOCTYPE 時,使用 document.documentElement。

頁面不具有 DTD,或者說沒有指定了 DOCTYPE,時,使用 document.body。

在 IE 和 Firefox 中均是如此。

為了兼容,不管有沒有 DTD,可以使用如下代碼:

var scrollTop = window.pageYOffset  //用於FF
                || document.documentElement.scrollTop  
                || document.body.scrollTop  
                || 0;




documentElement 和 body 相關說明:

body是DOM對象裏的body子節點,即 <body> 標簽;

documentElement 是整個節點樹的根節點root,即<html> 標簽;

DOM把層次中的每一個對象都稱之為節點,就是一個層次結構,你可以理解為一個樹形結構,就像我們的目錄一樣,一個根目錄,根目錄下有子目錄,子目錄下還有子目錄。

以HTML超文本標記語言為例:整個文檔的一個根就是,在DOM中可以使用document.documentElement來訪問它,它就是整個節點樹的根節點。而body是子節點,要訪問到body標簽,在腳本中應該寫:document.body。

【轉】document.documentElement和document.body的區別