用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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
精美漂亮的php分页类代码
2013/04/02 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
学习ExtJS form布局
2009/10/08 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
原生JS进行前后端同构
2018/04/22 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
如何使用repr调试python程序
2020/02/28 Python
Python插件机制实现详解
2020/05/04 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
C有"按引用传递"吗
2016/09/06 面试题
圣诞节红领巾广播稿
2014/02/03 职场文书
九年级语文教学反思
2014/02/04 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
老公保证书
2015/01/17 职场文书
个人维稳承诺书
2015/05/04 职场文书
财务人员入职担保书
2015/09/22 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js