因此当用户在一个较长内容的网页中点击某一个按钮显示DIV层会发现没有任何效果(其实已经在页面的顶部显示了)，因此，我们需要准备的知道用户当前的浏览的位置的信息。在实现这个要求之前，先来看看在js中有哪些工具可以让我们使用： 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth + " (包括边线和滚动条的宽)"; 网页可见区域高：document.body.offsetHeight + " (包括边线的宽)"; 网页正文全文宽：document.body.scrollWidth; 网页正文全文高：document.body.scrollHeight; 网页被卷去的高(ff)： document.body.scrollTop; 网页被卷去的高(ie)：document.documentElement.scrollTop; 网页被卷去的左：document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight; 屏幕可用工作区宽度： window.screen.availWidth; 你的屏幕设置是  window.screen.colorDepth +" 位彩色"; 你的屏幕设置  window.screen.deviceXDPI +" 像素/英寸";   这段资料来源于网络，看到这么多的相似的概念时我已经疯掉了，但处于技术人的执着，我还是顽强的看完了并做了一些理解。经过自己的理解和吸收之后，我觉得如果我每次想获取一个高度或者宽度信息时我会抓狂的，因此，我对浏览器的这些属性做了一些整理和抽象，按照这样的三个对象来剥离这么多的相似的属性，第一个是页面，第二是窗口，第三个是视口。来看图片理解我的这三个对象的含义吧： [url=http://images.cnblogs.com/cnblogs_com/liszt/201201/201201150143072147.png][img]http://images.cnblogs.com/cnblogs_com/liszt/201201/201201150143089050.png[/img] [/url] 对这三个概念做一个解释： 页面：就是我们制作出来的网页的页面的一个抽象，他的高度通常比我们的浏览器的高度要高，宽度通常是小于等于我们的浏览器宽度 浏览器窗口：就是我们使用的浏览器的一个抽象，他包含了菜单栏、工具栏、书签栏、状态栏、页面显示区等。因此他的高度绝对大于等于视口的高度，宽度绝对大于等于视口的宽度 视口：就是浏览器中显示页面的区域 有了这三个概念铺底，我们来写个小类库，获取这个“对象”的高度和宽度等信息吧：