JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

document对象:

(1) clientWidth，clientHeight

可以得到元素内容及内边距所占据的空间大小,不包border，滚动条等边线

解释：

1.增加边框，无变化；
2.增加外边距，无变化；
3.增加滚动条，最终值等于原本大小减去滚动条的大小，变小；
4.增加内边距，最终值等于原本大小加上内边距的大小，变大

网页可见区域宽： document.body.clientWidth;(混杂模式)document.documentElement.clientWidth;（标准模式）

网页可见区域高： document.body.clientHeight;document.documentElement.clientWidth

用于元素：box.clientWidth; 
                       box.clientHeight;

(2)clientLeft,clientTop

获取元素设置了左边框和上边框的大小

clientLeft: 获取对象的border宽度

clientTop：获取对象的border高度

box.clientLeft; //获取左边框的长度
box.clientTop; //获取上边框的长度

(3) scrollWidth，scrollHeight

获取滚动内容的元素大小

理解:
1.增加边框，不同浏览器有不同解释：
a) Firefox 和Opera 浏览器会增加边框的大小，220 x 220
b) IE、Chrome 和Safari 浏览器会忽略边框大小，200 x 200
c) IE 浏览器只显示它本来内容的高度，200 x 18
2.增加内边距，最终值会等于原本大小加上内边距大小，220 x 220，IE 为220 x 38
3.增加滚动条，最终值会等于原本大小减去滚动条大小，184 x 184，IE 为184 x 18
4.增加外边据，无变化。
5.增加内容溢出，Firefox、Chrome 和IE 获取实际内容高度，Opera 比前三个浏览
器获取的高度偏小，Safari 比前三个浏览器获取的高度偏大。
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;

用于元素：

box.scrollWidth; //200
box.scrollHeight

(4) scrollTop，scrollLeft

获取滚动条被隐藏的区域大小，也可设置定位到该区域，（即滚动条滚动了多少）

设置或获取位于对象左边界和对象中目前可见内容的最左端之间的距离(width+padding为一体)

设置或获取位于对象最顶端和对象中可见内容的最顶端之间的距离；(height+padding为一体)
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;

box.scrollTop; //获取滚动内容上方的位置
box.scrollLeft; //获取滚动内容左方的位置

(5) offsetWidth,offsetHeight
 返回元素实际大小，包含边框、内边距和滚动条(一般包含在padding中)

 offsetWidth ：width+padding+border

 offsetHeight： Height+padding+border

1.增加边框，最终值会等于原本大小加上边框大小；
2.增加内边距，最终值会等于原本大小加上内边距大小；
3.增加外边据，无变化；
4.增加滚动条，无变化，不会减小；
网页可见区域宽： document.body.offsetWidth   (包括边线的宽);
网页可见区域高： document.body.offsetHeight(包括边线的宽);

用于元素：

box.offsetWidth;  
box.offsetHeight;

offsetWidth

当前对象的实际宽度和高度。

box.offsetWidth;  
box.offsetHeight;

style.width也是当前对象的宽度(width+padding+border)。

区别：1)style.width返回值除了数字外还带有单位px；

           2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小，

              style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值；

           3)如果没有给 HTML 元素指定过 width样式，则 style.width 返回的是空字符串；

offsetHeight

style.height也是当前对象的高度(height+padding+border)。

区别：1)style.height返回值除了数字外还带有单位px；

           2)如对象的高度设定值为百分比高度,则无论页面变高还是变矮，

              style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值；

           3)如果没有给 HTML 元素指定过 height样式，则 style.height返回的是空字符串；

(6) offsetLeft ，offsetTop :

当前对象到其上级层左边的距离。

不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。

style.left当前对象到其上级层左边的距离。

区别：1)style.left返回值除了数字外还带有单位px；

           2)如对象到其上级层左边的距离设定值为百分比，

              style.left返回此百分比,而offsetLeft则返回到其上级层左边的距离的值；

           3)如果没有给 HTML 元素指定过 left样式，则 style.left返回的是空字符串；

当前对象到其上级层顶部边的距离。

不能对其进行赋值.设置对象到上级层顶部边的距离请用style.top属性。

 

style.top当前对象到其上级层顶部边的距离。

区别：1)style.top返回值除了数字外还带有单位px；

           2)如对象到其上级层顶部边的距离设定值为百分比，

              style.top返回此百分比,而offsetTop则返回到其上级顶部边的距离的值；

           3)如果没有给 HTML 元素指定过 top样式，则 style.top返回的是空字符串；

注意：如果上级层为body，由于IE、FF对padding、margin的解释不一样所以要明确规定处理不是下列的区别就不成立了。

IE   1)如果Div的上级层是body，而div与body之间有个div，如body->div->divo；divo的offsetTop=div的padding+margin+boder；

       2）如果Div的上级层是body，如body>divo；divo的offsetTop=div的padding+margin+boder；

             这divo的offsetTop=divo的margin >body.padding则为divo的margin，否则为body.padding谁大是谁？

FF  上述两种情况：offsetTop=margin+padding ;

(IE与FF中的body默认padding为10)在IE6.0 FF3.6.13

（7）offsetParent :当前对象的上级层对象.

window对象：

（1）innerHeight属性：窗口中文档显示区域的高度，不包括菜单栏、工具栏等部分。该属性可读可写。

     IE不支持该属性，IE中body或者（documentElement）元素的clientHeight属性与该属性相同。

     document.body.clientHeight(混杂模式) || document.documentElement.clientWIdth（标准模式）

    innerWidth属性：窗口中文档显示区域的宽度，同样不包括边框。该属性可读可写。

     IE不支持该属性，IE中body元素（documentElement）的clientWidth属性与该属性相同。

     clientHeight与clientWidth属性是只读的。

     另外，IE不支持outerWidth、outerHeight属性。

 (2)pageXOffset属性：整数只读属性，表示文档向右滚动过的像素数。

     IE不支持该属性，使用body元素的scrollLeft属性替代。

   pageYOffset属性：整数只读属性，表示文档向下滚动过的像素数。

     IE不支持该属性，使用body元素的scrollTop属性替代。

 兼容IE与DOM浏览器，如何获取窗口中文档显示区域的宽度及高度，使用?:条件语句，如下：

 windows.innerWidth ? windows.innerWidth : document.body.clientWidth;

 windows.innerHeight ? windows.innerHeight : document.body.clientHeight;

(3) screenLeft,screenTop

返回窗口相对于屏幕的X和Y坐标

网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;

(4)window.screen.width, window.screen.height;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;

(5)window.screen.availHeight;window.screen.availWidth;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

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

以上属性测试的文档类型为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果不写文档类型，浏览器就会按照 HTML 4.0 的方式来处理，则效果可能不同。