JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度等技术要点分析

网页可见区域宽：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

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

(需要提一下：css中的margin属性，与clientwidth、offsetwidth、clientheight、offsetheight均无关)

网页可见区域宽： 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

-------------------

技术要点

本节代码主要使用了document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在netscape下需要使用window的属性;在ie下需要 深入document内部对body进行检测;在dom环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

window对象的innerwidth属性包含当前窗口的内部宽度。window对象的innerheight属性包含当前窗口的内部高度。

document对象的body属性对应html文档的标签。document对象的documentelement属性则表示html文档的根节点。

document.body.clientheight表示html文档所在窗口的当前高度。document.body. clientwidth表示html文档所在窗口的当前宽度。