clientHeight / scrollHeight / offsetHeight 等属性的区别图

 取document.body.scrollTop 值时 一直为0, 是因为：

页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。
页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容（不管有没有 DTD），可以使用如下代码：
var scrollTop = window.pageYOffset  
                || document.documentElement.scrollTop  
                || document.body.scrollTop  
                || 0;

 

下面是一个右侧动态悬浮的例子： 兼容firefox  和 IE 7 （IE 版本太多了 ，测试不过来）

    <script type="text/javascript" language="javascript">
         function scall() {
            var scrollTop = window.pageYOffset
                || document.documentElement.scrollTop
                || document.body.scrollTop
                || 0;

            $get("divChat").style.top = (scrollTop + 300)+"px";
         }

        window.onscroll = scall;
        window.onresize = scall;
        window.onload = scall;   
    </script>

       <div id="divChat" style="position: absolute;right:0;top:300px;" title='Click here to chat with us.'>
                   Test chat div                   

 </div>

---

 

 

网页(内容)可见区域宽：document.body.clientWidth

 

网页(内容)可见区域高：document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

 

网页可见区域宽：document.body.offsetWidth (包括边线的宽)

 

网页可见区域高：document.body.offsetHeight (包括边线的宽)

 

网页正文全文宽：document.body.scrollWidth

 

网页正文全文高：document.body.scrollHeight

 

IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。

 

NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

 

网页被卷去的高：document.body.scrollTop

 

网页被卷去的左：document.body.scrollLeft

 

网页正文部分上：window.screenTop

 

网页正文部分左：window.screenLeft

 

屏幕分辨率的高：window.screen.height

 

屏幕分辨率的宽：window.screen.width

 

屏幕可用工作区高度：window.screen.availHeight

 

屏幕可用工作区宽度：window.screen.availWidth

 

 

 

 

原文链接：http://blog.163.com/it_yinliqing/blog/static/784972712008111011843895/