网页可见区域宽: 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 +" 像素/英寸";
这段资料来源于网络,看到这么多的相似的概念时我已经疯掉了,但处于技术人的执着,我还是顽强的看完了并做了一些理解。经过自己的理解和吸收之后,我觉得如果我每次想获取一个高度或者宽度信息时我会抓狂的,因此,我对浏览器的这些属性做了一些整理和抽象,按照这样的三个对象来剥离这么多的相似的属性,第一个是页面,第二是窗口,第三个是视口。来看图片理解我的这三个对象的含义吧:
源代码下载查看