js获取屏幕尺寸代码全集与常用代码段

最近一段时间在做有关通过js来获取屏幕尺寸从来来控制一样效果或者样式的项目，于是，我也花了点时间好好的整理了一份关于js获取屏幕尺寸代码的文档出来，供大家参考，也许有些地方写的有问题，还望大家多多指出错误，以便文档写的更完整，更准确。

varbodyWidth=document.body.clientWidth；//网页可见区域宽
varbodyHeight=document.body.clientHeight；//网页可见区域高
varbodyWidthWithBorder=document.body.offsetWidth；//网页可见区域宽(包括边线的宽)
varbodyHeightWithBorder=document.body.offsetHeight；//网页可见区域高(包括边线的宽)
varbodyWidthWithScroll=document.body.scrollWidth；//网页正文全文宽
varbodyHeightWithScroll=document.body.scrollHeight；//网页正文全文高
varbodyTopHeight=document.body.scrollTop；//网页被卷去的上边距
varbodyLeftWidth=document.body.scrollLeft；//网页被卷去的左边距
varwindowTopHeight=window.screenTop；//网页正文部分上边距
varwindowLeftWidth=window.screenLeft；//网页正文部分左边距
varscreenHeight=window.screen.height；//屏幕分辨率的高
varscreenWidth=window.screen.width；//屏幕分辨率的宽
varscreenAvailHeight=window.screen.availHeight；//屏幕可用工作区高度
varscreenAvailWidth=window.screen.availWidth；//屏幕可用工作区宽度

HTML精确定位：scrollLeft，scrollWidth，clientWidth，offsetWidth
scrollHeight：获取对象的滚动高度。
scrollLeft：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth：获取对象的滚动宽度
offsetHeight：获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度
offsetLeft：获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置
offsetTop：获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置
event.clientX：相对文档的水平座标
event.clientY：相对文档的垂直座标
event.offsetX：相对容器的水平坐标
event.offsetY：相对容器的垂直坐标
document.documentElement.scrollTop：垂直方向滚动的值
event.clientX+document.documentElement.scrollTop：相对文档的水平座标+垂直方向滚动的量

IE，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth=width+padding
clientHeight=height+padding
offsetWidth=width+padding+border
offsetHeight=height+padding+border
IE5.0/5.5：
clientWidth=width-border
clientHeight=height-border
offsetWidth=width
offsetHeight=height

IE与FF下共同支持与不支持的属性研究，以及取值的差异：

一、以下是IE新开页面屏幕计算默认值(每台电脑显示器分辨率不同)：
FF与IE都支持(计算有差异)网页可见区域宽【document.body.clientWidth】：1239
FF与IE都支持(计算有差异)网页可见区域高【document.body.clientHeight】：0
FF与IE都支持(计算有差异)网页可见区域宽【document.body.offsetWidth】：1239
FF与IE都支持(计算有差异)网页可见区域高【document.body.offsetHeight】：0
FF与IE都支持(计算有差异)网页正文全文宽【document.body.scrollWidth】：1239
FF与IE都支持(计算有差异)网页正文全文高【document.body.scrollHeight】：0
FF与IE都支持(计算相同)网页被卷去的高【document.body.scrollTop】：0
FF与IE都支持(计算相同)网页被卷去的宽【document.body.scrollLeft】：0
只支持IE:网页正文部分上【window.screenTop】：144
只支持IE：网页正文部分左【window.screenLeft】：0
FF与IE都支持(计算相同)：屏幕分辨率的高【window.screen.height】：1024
FF与IE都支持(计算相同)：屏幕分辨率的宽【window.screen.width】：1280
FF与IE都支持(计算相同)：屏幕可用工作区高度【window.screen.availHeight】：990
FF与IE都支持(计算相同)：屏幕可用工作区宽度【window.screen.availWidth】：1280
FF与IE都支持(计算有差异)：窗体左【document.body.offsetLeft】与右【document.body.offsetTop】：10和15
FF与IE都支持(计算有差异)：窗体高【document.body.offsetWidth】与宽【document.body.offsetHeight】：1239和0
垂直方向滚动的值【document.documentElement.scrollTop】:0
只支持FF浏览器整个宽高，不包括工具条【windows.innerHeight】：undefined
FF与IE都支持(计算有差异)网页内容可视区域的高度【document.documentElement.clientHeight】:820
FF与IE都支持(计算相同)：获取位于对象最顶端和窗口中可见内容的最顶端之间的距离【document.documentElement.scrollTop】:0

二、以下是FF新开页面屏幕计算默认值：
FF与IE都支持(计算有差异)网页可见区域宽【document.body.clientWidth】：1264
FF与IE都支持(计算有差异)网页可见区域高【document.body.clientHeight】：0
FF与IE都支持(计算有差异)网页可见区域宽【document.body.offsetWidth】：1264
FF与IE都支持(计算有差异)网页可见区域高【document.body.offsetHeight】：0
FF与IE都支持(计算有差异)网页正文全文宽【document.body.scrollWidth】：1264
FF与IE都支持(计算有差异)网页正文全文高【document.body.scrollHeight】：0
FF与IE都支持(计算相同)网页被卷去的高【document.body.scrollTop】：0
FF与IE都支持(计算相同)网页被卷去的宽【document.body.scrollLeft】：0
只支持IE:网页正文部分上【window.screenTop】：undefined
只支持IE：网页正文部分左【window.screenLeft】：undefined
FF与IE都支持(计算相同)：屏幕分辨率的高【window.screen.height】：1024
FF与IE都支持(计算相同)：屏幕分辨率的宽【window.screen.width】：1280
FF与IE都支持(计算相同)：屏幕可用工作区高度【window.screen.availHeight】：990
FF与IE都支持(计算相同)：屏幕可用工作区宽度【window.screen.availWidth】：1280
FF与IE都支持(计算有差异)：窗体左【document.body.offsetLeft】与右【document.body.offsetTop】：0和0
FF与IE都支持(计算有差异)：窗体高【document.body.offsetWidth】与宽【document.body.offsetHeight】：1264和0
垂直方向滚动的值【document.documentElement.scrollTop】:0
只支持FF浏览器整个宽高，不包括工具条【windows.innerHeight】：829
FF与IE都支持(计算有差异)网页内容可视区域的高度【document.documentElement.clientHeight】:858
FF与IE都支持(计算相同)：获取位于对象最顶端和窗口中可见内容的最顶端之间的距离【document.documentElement.scrollTop】:0

以上数据表明:在FF与IE下,在计算屏幕宽度时,FF比IE多25个像素.

取滚动条最大值:

varmaxScrollLeft=element.scrollWidth-element.clientWidth;

http://stackoverflow.com/questions/5138373/how-do-i-get-the-max-value-of-scrollleft