繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用document.documentElement取代document.body的原因分析
- Javascript
- 自己开发Dojo的建议框架
- js每次Title显示不同的名言
- 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
- 无限级别的菜单（侧拉菜单）
- 点选TOP后并不是直接跳到页顶的，而是滚动上去
- js下拉菜单中自动信息轮换播放
- 英文首字母全大写的js实现脚本
- 实例区别onClick和onDBClick两事件方法
- 改变文本框字体颜色的js脚本
- js星空效果代码
- 判断li是否有样式的js代码
- 文本框点击时文字消失，失去焦点时文字出现
- 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开
- 右下角弹出窗口效果代码
- JS控制对象移动效果
- 验证用户是否修改过页面的数据的实现方法
- Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
- 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
- EXT富客户端后台管理系统 初步代码
- 不同浏览器javascript变量作用域的处理方法
Javascript 中的 用document.documentElement取代document.body的原因分析
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 473 ::
收藏到网摘: n/a
ll建议用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方法获取各种页面高宽属性了吧^_^!
评论 (0) All
