为您解惑：JS中宽度、高度的用法区别.........

声明了DOCTYPE的浏览器中

window 对象

1.获取电脑屏幕分辨率宽高度一般获得方法

代码如下：

window.screen.width  

window.screen.height

注：各种版本的浏览器都支持

2.获取电脑屏幕可用工作区宽高度（即：去除任务栏外的电脑屏幕宽高）的一般方法

代码如下：

window.screen.availWidth  

window.screen.availHeight

注：各种版本的浏览器都支持

3.浏览器窗口的可视区域的高度和宽度（返回或设置属性值）

window.innerWidth  

window.innerHeight

注：Firefox、Chrome、IE9+以及以上 支持这两个属性。

因此，IE9以下的浏览器，用document.documentElement.clientWidth/clientHeight （兼容IE7以及IE7以上)；用document.body.clientWidth/clientHeight （兼容IE6和IE5）

注：其实 document.body.clientWidth/clientHeight 支持IE6,5，以及Firefox、Chrome。

4.浏览器窗口的外部（整个）宽度和高度（返回或设置属性值）

window.outerWidth  

window.outerHeight

注：Firefox、Chrome、IE9+以及以上 支持这两个属性。

document对象

5.整个网页内容区的获得方法（用于获取）

document.documentELement.scrollHeight

document.body.scrollHeight（一般用此方法）

注： （1）document.documentElement是文档对象根节点(html)的引用，document.body是DOM中Document对象里的body节点。

         （2）document.body.scrollHeight是body元素的滚动高度，document.documentElement.scrollHeight为页面的滚动高度，且两者在IE和Firefox下还有点小差异如下：

                  IE : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度 + 上下border宽度（IE10以及IE10以上两者相等）
                  firefox : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度（在本地的ff浏览器里测试两者相等，不存在这种关系）

6.滚动条距离最顶端和最左端的距离（返回或者设置属性值）

document.documentElement.scrollLeft

document.body.scrollTop

注：这两个属性在不同浏览器的取值不相同，两者必有一个取值为零和一个取值真实的距离。因此可以这样对浏览器兼容：var   iScrollTop=document.documentElement.scrollLeft+document.body.scrollTop。

一般元素对象（如<div>等）

7.获取一般元素对象的clientWidth/clientHeight、offsetWidth/offsetHHeight、scrollWidth/scrollHeight.

element.clientWidth

element.clientHeight

注：element.clientWidth = width+padding

element.offsetWidth

element.offsetHeight

注：element.offsetWidth = width+padding+border

element.scrollWidth

element.scrollHeight

注：element.scrollWidth/scrollHeight 表示element内容的宽度和高度即：width+padding。

注：以上三种情况（一般元素对象）只能用来获取元素对象属性的值（纯数字无单位），而不能设置。

扩展：

event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标