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


Posted in Javascript onNovember 12, 2009

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方法获取各种页面高宽属性了吧^_^!

Javascript 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 #Javascript
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 #Javascript
jquery控制listbox中项的移动并排序
Nov 12 #Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 #Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 #Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 #Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 #Javascript
You might like
剖析 PHP 中的输出缓冲
2006/12/21 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
python设置windows桌面壁纸的实现代码
2013/01/28 Python
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
python WindowsError的错误代码详解
2017/07/23 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
python爬虫---requests库的用法详解
2020/09/28 Python
python音频处理的示例详解
2020/12/23 Python
英文自荐信常用句子
2014/03/26 职场文书
市场营销专业求职信
2014/06/17 职场文书
实习科室评语
2015/01/04 职场文书
裁员通知
2015/04/25 职场文书
2015小学师德工作总结
2015/07/21 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
nginx设置资源请求目录的方式详解
2022/05/30 Servers