转document.documentElement和document.body的区别
網(wǎng)頁(yè)中獲取滾動(dòng)條卷去部分的高度,可以通過(guò) document.body.scrollTop 來(lái)獲取,比如使div跟著滾動(dòng)條滾動(dòng):
轉(zhuǎn)至:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html
<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"; }?
運(yùn)行后沒(méi)有達(dá)到預(yù)期效果,輸出 document.body.scrollTop 的值一看,一直都是 0。一翻折騰,原來(lái)是 DTD 的問(wèn)題,要是頁(yè)面直接用 <html> 開(kāi)頭的話(huà)就沒(méi)有問(wèn)題了。但是要符合 web 標(biāo)準(zhǔn),DTD 當(dāng)然是不能少的。
如果有 DTD 時(shí)用,那就用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以了。
?
window.onscroll = function () {var oFix = document.getElementById("divfix");oFix.style.top = document.documentElement.scrollTop + "px"; }DTD相關(guān)說(shuō)明:
?
頁(yè)面具有 DTD,或者說(shuō)指定了 DOCTYPE 時(shí),使用 document.documentElement。
頁(yè)面不具有 DTD,或者說(shuō)沒(méi)有指定了 DOCTYPE,時(shí),使用 document.body。
在 IE 和 Firefox 中均是如此。
為了兼容,不管有沒(méi)有 DTD,可以使用如下代碼:
?
var scrollTop = window.pageYOffset //用于FF|| document.documentElement.scrollTop || document.body.scrollTop //chrom|| 0;documentElement 和 body 相關(guān)說(shuō)明:
?
body是DOM對(duì)象里的body子節(jié)點(diǎn),即 <body> 標(biāo)簽;
documentElement 是整個(gè)節(jié)點(diǎn)樹(shù)的根節(jié)點(diǎn)root,即<html> 標(biāo)簽;
?
DOM把層次中的每一個(gè)對(duì)象都稱(chēng)之為節(jié)點(diǎn),就是一個(gè)層次結(jié)構(gòu),你可以理解為一個(gè)樹(shù)形結(jié)構(gòu),就像我們的目錄一樣,一個(gè)根目錄,根目錄下有子目錄,子目錄下還有子目錄。
以HTML超文本標(biāo)記語(yǔ)言為例:整個(gè)文檔的一個(gè)根就是,在DOM中可以使用document.documentElement來(lái)訪問(wèn)它,它就是整個(gè)節(jié)點(diǎn)樹(shù)的根節(jié)點(diǎn)。而body是子節(jié)點(diǎn),要訪問(wèn)到body標(biāo)簽,在腳本中應(yīng)該寫(xiě):document.body。
轉(zhuǎn)載于:https://www.cnblogs.com/xiaohong/p/3549483.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的转document.documentElement和document.body的区别的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: cocos2dx
- 下一篇: 【ARDUINO】HC-05蓝牙不配对问