<p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p>
<p>如果在页面中添加这行标记的话<br />
IE<br />
document.body.clientWidth ==> BODY对象宽度<br />
document.body.clientHeight ==> BODY对象高度<br />
document.documentElement.clientWidth ==> 可见区域宽度<br />
document.documentElement.clientHeight ==> 可见区域高度<br />
Firefox<br />
document.documentElement.scrollHeight ==> 浏览器所有内容高度<br />
document.body.scrollHeight ==> 浏览器所有内容高度<br />
document.documentElement.scrollTop ==> 浏览器滚动部分高度<br />
document.body.scrollTop ==>始终为0<br />
document.documentElement.clientHeight ==>浏览器可视部分高度<br />
document.body.clientHeight ==> 浏览器所有内容高度<br />
Chrome<br />
document.documentElement.scrollHeight ==> 浏览器所有内容高度<br />
document.body.scrollHeight ==> 浏览器所有内容高度<br />
document.documentElement.scrollTop==> 始终为0<br />
document.body.scrollTop==>浏览器滚动部分高度<br />
document.documentElement.clientHeight ==> 浏览器可视部分高度<br />
document.body.clientHeight ==> 浏览器所有内容高度<br />
浏览器所有内容高度即浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和<br />
浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。<br />
综上<br />
1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop<br />
2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body<br />
clientHeight<br />
在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。<br />
PageX和clientX<br />
PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化<br />
clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.<br />
可是悲剧的是,PageX只有FF特有,IE则没有这个,所以在IE下使用这个:<br />
PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)<br />
scrollTop代表的是被浏览器滑动条滚过的长度<br />
offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder`,可能出现负值<br />
只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.<br />
最给力的是,chrome和safari 完全支持所有属性</p>