快捷導(dǎo)航

用document.documentElement取代document.body的原因分析

更新時(shí)間：2009年11月12日 23:59:32 作者：

ll建議用document.documentElement代替document.body

IE6在頁(yè)面內(nèi)容超出窗口大小時(shí)將寬度屬性scrollWidth、clientWidth、offsetWidth都解釋為內(nèi)容實(shí)際寬度。
上次的測(cè)試說(shuō)明了document.body屬性并不會(huì)給我們返回預(yù)期的結(jié)果，比如我們用document.body.clientHeight原本想取得“頁(yè)面可見(jiàn)區(qū)域高度”，可實(shí)際上返回的是“頁(yè)面實(shí)際內(nèi)容高度”。
那我們?cè)趺崔k呢？難道加上了文檔DTD類(lèi)型之后就再也不能取到“可見(jiàn)區(qū)域高度”和“內(nèi)容實(shí)際寬度”等等屬性了嗎？

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>documentElement</title> 
<style type="text/css"> 
body{margin:0;padding:0;font:12px/150% arial;} 
</style> 
<script type="text/javascript"> 
function a() { 
var scrollTop; 
var scrollLeft; 
if (typeof window.pageYOffset != 'undefined') { 
scrollTop = window.pageYOffset; 
scrollLeft = window.pageXOffset; 
} 
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { 
scrollTop = document.documentElement.scrollTop; 
scrollLeft = document.documentElement.scrollLeft; 
} 
else if (typeof document.body != 'undefined') { 
scrollTop = document.body.scrollTop; 
scrollLeft = document.body.scrollLeft; 
} 
var scrollHeight = document.documentElement.scrollHeight; 
var scrollWidth = document.documentElement.scrollWidth; 
var clientWidth = document.documentElement.clientWidth; 
var clientHeight = document.documentElement.clientHeight; 
var offsetWidth = document.documentElement.offsetWidth; 
var offsetHeight = document.documentElement.offsetHeight; 
var screenTop = window.screenTop; 
var screenBottom = window.screenBottom; 
var screenLeft = window.screenLeft; 
var sheight = window.screen.height; 
var swidth = window.screen.width; 
var availHeight = window.screen.availHeight; 
var availWidth = window.screen.availWidth; 
document.getElementById('scrollTop').value = scrollTop; 
document.getElementById('scrollLeft').value = scrollLeft; 
document.getElementById('scrollHeight').value = scrollHeight; 
document.getElementById('scrollWidth').value = scrollWidth; 
document.getElementById('clientWidth').value = clientWidth; 
document.getElementById('clientHeight').value = clientHeight; 
document.getElementById('offsetWidth').value = offsetWidth; 
document.getElementById('offsetHeight').value = offsetHeight; 
document.getElementById('screenTop').value = screenTop; 
document.getElementById('screenBottom').value = screenBottom; 
document.getElementById('screenLeft').value = screenLeft; 
document.getElementById('sheight').value = sheight; 
document.getElementById('swidth').value = swidth; 
document.getElementById('availHeight').value = availHeight; 
document.getElementById('availWidth').value = availWidth; 
} 
</script> 
</head> 
<body> 
<div style="width:420px;height:470px;margin:0 auto;font-size:12px; border:solid 5px #ccc;"> 
<center> 
<table width="400" border="0" cellspacing="0" cellpadding="0" style="font-size:12px;margin-top:20px;"> 
<tr> 
<td width="187" align="right">scrollTop（滾動(dòng)條卷過(guò)的高）：</td> 
<td width="10"> </td> 
<td width="209"><input type="text" name="scrollTop" id="scrollTop" /></td> 
</tr> 
<tr> 
<td align="right">scrollLeft（滾動(dòng)條卷過(guò)的寬）：</td> 
<td> </td> 
<td><input type="text" name="scrollLeft" id="scrollLeft" /></td> 
</tr> 
<tr> 
<td align="right">scrollHeight（內(nèi)容實(shí)際高度）：</td> 
<td> </td> 
<td><input type="text" name="scrollHeight" id="scrollHeight" /></td> 
</tr> 
<tr> 
<td align="right">scrollWidth（內(nèi)容實(shí)際寬度）：</td> 
<td> </td> 
<td><input type="text" name="scrollWidth" id="scrollWidth" /></td> 
</tr> 
<tr> 
<td align="right">clientWidth（可見(jiàn)區(qū)域?qū)挘?lt;/td> 
<td> </td> 
<td><input type="text" name="clientWidth" id="clientWidth" /></td> 
</tr> 
<tr> 
<td align="right">clientHeight（可見(jiàn)區(qū)域高）：</td> 
<td> </td> 
<td><input type="text" name="clientHeight" id="clientHeight" /></td> 
</tr> 
<tr> 
<td align="right">offsetWidth（加滾動(dòng)條寬？）：</td> 
<td> </td> 
<td><input type="text" name="offsetWidth" id="offsetWidth" /></td> 
</tr> 
<tr> 
<td align="right">offsetHeight（加滾動(dòng)條高？）：</td> 
<td> </td> 
<td><input type="text" name="offsetHeight" id="offsetHeight" /></td> 
</tr> 
<tr> 
<td align="right">screenTop：</td> 
<td> </td> 
<td><input type="text" name="screenTop" id="screenTop" /></td> 
</tr> 
<tr> 
<td align="right">screenBottom：</td> 
<td> </td> 
<td><input type="text" name="screenBottom" id="screenBottom" /></td> 
</tr> 
<tr> 
<td align="right">screenLeft：</td> 
<td> </td> 
<td><input type="text" name="screenLeft" id="screenLeft" /></td> 
</tr> 
<tr> 
<td align="right">sheight（分辨率高）：</td> 
<td> </td> 
<td><input type="text" name="sheight" id="sheight" /></td> 
</tr> 
<tr> 
<td align="right">swidth（分分辨率寬）：</td> 
<td> </td> 
<td><input type="text" name="swidth" id="swidth" /></td> 
</tr> 
<tr> 
<td align="right">availHeight：</td> 
<td> </td> 
<td><input type="text" name="availHeight" id="availHeight" /></td> 
</tr> 
<tr> 
<td align="right">availWidth：</td> 
<td> </td> 
<td><input type="text" name="availWidth" id="availWidth" /></td> 
</tr> 
</table> 
<a href="javascript:a()" style="height:20px;display:block;">內(nèi)容高度是400PX，點(diǎn)擊查看所有屬性值</a> 
</center> 
</div> 
</body> 
</html> 

其實(shí)，我們可以用document.documentElement代替document.body來(lái)獲取我們想要的結(jié)果將代碼中的document.body替換為document.documentElement，再來(lái)看看各瀏覽器下的實(shí)際結(jié)果：
ii測(cè)試結(jié)果表明，IE系列瀏覽器對(duì)document.documentElement屬性的解釋是正確的，其它標(biāo)準(zhǔn)瀏覽器將offsetHeight解釋成了scrollHeight?；鸷蚽etscape更是把這兩個(gè)屬性調(diào)換了過(guò)來(lái)。不過(guò)總的來(lái)說(shuō)各屬性都可以有個(gè)相應(yīng)的解釋?zhuān)粫?huì)像 document.body一樣只有可憐的兩種解釋。

終于可以放心地使用JS方法獲取各種頁(yè)面高寬屬性了吧^_^!

您可能感興趣的文章: