用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 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
微信小程序wxs实现吸顶效果
Jan 08 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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优于Node.js的五大理由分享
2012/09/15 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
浅析php工厂模式
2014/11/25 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
JS库之Waypoints的用法详解
2017/09/13 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
python实现中文输出的两种方法
2015/05/09 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
2014年法制宣传日活动方案
2014/11/02 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
导游词之无锡东林书院
2019/12/11 职场文书