高级统计师模拟试题:offsetLeft、offsetRight、offsetTop、offsetBottom、offsetWidth、offsetH...

假设 obj 为某个 HTML 控件。

obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

obj.offsetRight 指 obj 距离右方或上层控件的位置，整型，单位像素。

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。

obj.offsetBottom 指 obj 距离下方或上层控件的位置，整型，单位像素。

obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如：

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。

“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。

以上属性在 FireFox 中也有效。

window.screen.availWidth     返回当前屏幕宽度(空白空间)  
window.screen.availHeight     返回当前屏幕高度(空白空间)  
window.screen.width     返回当前屏幕宽度(分辨率值)  
window.screen.height     返回当前屏幕高度(分辨率值)  
window.document.body.offsetHeight;     返回当前网页高度  
window.document.body.offsetWidth;     返回当前网页宽度  

我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

再附上一些

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth   (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

对于因为使用web标准失效比如document.body.scrollTop总是零的原因

解决方法如下：

原来在HTML文件头部声明了这样一句：

改成这样就好了：

但页面稍有变化，感觉不爽，于是又在google里找，终于发现这是IE5与IE6的区别：

var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
   scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' &&
     document.compatMode != 'BackCompat') {
   scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
   scrollPos = document.