管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。

　　上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientHeight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。

　　那我们怎么办呢？难道加上了文档DTD类型之后就再也不能取到“可见区域高度”和“内容实际宽度”等等属性了吗？

　　

复制代码 代码如下:

　　<!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（滚动条卷过的高）：</td>

　　<td width="10"> </td>

　　<td width="209"><input type="text" name="scrollTop" id="scrollTop" /></td>

　　</tr>

　　<tr>

　　<td align="right">scrollLeft（滚动条卷过的宽）：</td>

　　<td> </td>

　　<td><input type="text" name="scrollLeft" id="scrollLeft" /></td>

　　</tr>

　　<tr>

　　<td align="right">scrollHeight（内容实际高度）：</td>

　　<td> </td>

　　<td><input type="text" name="scrollHeight" id="scrollHeight" /></td>

　　</tr>

　　<tr>

　　<td align="right">scrollWidth（内容实际宽度）：</td>

　　<td> </td>

　　<td><input type="text" name="scrollWidth" id="scrollWidth" /></td>

　　</tr>

　　<tr>

　　<td align="right">clientWidth（可见区域宽）：</td>

　　<td> </td>

　　<td><input type="text" name="clientWidth" id="clientWidth" /></td>

　　</tr>

　　<tr>

　　<td align="right">clientHeight（可见区域高）：</td>

　　<td> </td>

　　<td><input type="text" name="clientHeight" id="clientHeight" /></td>

　　</tr>

　　<tr>

　　<td align="right">offsetWidth（加滚动条宽？）：</td>

　　<td> </td>

　　<td><input type="text" name="offsetWidth" id="offsetWidth" /></td>

　　</tr>

　　<tr>

　　<td align="right">offsetHeight（加滚动条高？）：</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;">内容高度是400PX，点击查看所有属性值</a>

　　</center>

　　</div>

　　</body>

　　</html>

　　其实，我们可以用document.documentElement代替document.body来获取我们想要的结果 将代码中的document.body替换为document.documentElement，再来看看各浏览器下的实际结果：

　　ii测试结果表明，IE系列浏览器对document.documentElement属性的解释是正确的，其它标准浏览器将offsetHeight解释成 了scrollHeight。火狐和netscape更是把这两个属性调换了过来。不过总的来说各属性都可以有个相应的解释，不会像 document.body一样只有可怜的两种解释。

　　终于可以放心地使用JS方法获取各种页面高宽属性了吧^_^!

教程首页 更多教程