用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 相关文章推荐
Js组件的一些写法
Sep 10 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
Javascript异步编程async实现过程详解
Apr 02 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
解决pycharm双击但是无法打开的情况
Oct 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结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
php计算税后工资的方法
2015/07/28 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
自制PHP框架之设计模式
2017/05/07 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
TypeScript入门-接口
2017/03/30 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
vue项目引入字体.ttf的方法
2018/09/28 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
python中的json总结
2018/10/11 Python
python找出完数的方法
2018/11/12 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
个人自我评价范文
2014/02/05 职场文书
授权委托书公证
2014/09/14 职场文书
迎新生晚会主持词
2015/06/30 职场文书
银行求职信范文
2019/05/13 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript