js中获取各种宽高的API比较纷杂，再加上网上对某些API的表现众说纷纭，而且浏览器之间也存在差异，所以急需系统总结，把脑袋里搅在一起的属性方法归类；

目录：

一、window对象下的距离API

二、document对象下的API

三、Event对象内的坐标信息

四、element.getBoundingClientRect()

五、jQuery中的宽高API

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

一、window对象下的距离API

1、window.screen对象下的API

a、window.screen.width

b、window.screen.height

c、window.screen.availWidth

d、window.screen.availHeight

总结一下：

abcd表示的是设备屏幕的宽高，但cd项表示的是可用宽高，所以会排除系统任务栏的宽或高（取决于系统的任务栏是竖直还是横向）,而ab则会将系统任务栏的高度/宽度计算其中

2、window下的API

a、winodw.screenTop

b、window.screenLeft

c、window.screenX

d、window.screenY

总结一下：

abcd项在浏览器中的表现一致。都表示浏览器窗口距离设备屏幕上/左的距离；

只不过在火狐浏览器中，当浏览器在全屏状态下的四个api的值都为-7；

在IE浏览器中，当浏览器在全屏状态下cd项的值为-7，b的值为0，但a的值为79，这是因为IE浏览器是从视口开始计算，所以这个79就是浏览器顶栏的高度；

而在其他浏览器中值为0（因为剩下的浏览器的内核都为webkit了）

兼容性问题，除IE外，其他浏览器全部兼容。

IE9、10、11对abcd四个api都支持，IE8下cd值为undefined

e、window.innerWidth

f、window.innerHeight

g、window.outerWidth

h、window.outerHeight

总结一下：

ef表示浏览器视口的宽高，滚动条不会影响其计算，换句话说，滚动条的距离也会被计算在其中。

gh表示浏览器窗口的宽高。

二、document对象下的API

a、document.body.clientWidth

b、document.body.clientHeight

总结一下：

ab表示元素的content+padding；

滚动条会影响ab的值，表现为ab不计滚动条的宽高。

附:document.documentElement.clientWidth/Height，与ab项都能够获取浏览器的可视高度，但ab项必须在html混杂模式中才能够获取到正常的值

c、document.body.clientTop

d、document.body.clientLeft

总结一下：

cd项获取的是元素边框的高度，即cd项的值为border-top/border-left的值

e、document.body.offsetWidth

f、document.body.offsetHeight

总结一下：

ef项表示元素的content+padding+border，与内部元素是否超出无关

g、document.body.offsetLeft

h、document.body.offsetTop

总结一下：

gh项是一个很特殊的项，网上说法不一，MDN模糊不清，所以需要自己提炼

 

 

 

 

经过检验：chrome与Firefox浏览器中存在差异，现将结果贴图如下

chrome浏览器：

Firefox浏览器：

可以看出同样的代码结果存在差异。

scrollLeft/Top定义是相对于offsetParent的偏移距离，offsetParent为最近的具有定位（除了position为static）的元素；若不存在则为body；

经检验，chrome与firefox的差异存在于当offsetParent为body时(仅以offsetLeft为例，offsetTop的表现与offsetLeft的表现一致)：

Firefox是不将body的border计算在内的，但chrome会；所以chrome的offsetLeft为body的margin+border+padding+元素本身的margin，firefox则会忽略body的border

另外，若offsetParent不为body时：

offsetLeft为offsetParent的padding+元素本身的margin，这一点chrome与firefox无差别

i、document.body.scrollWidth

j、document.body.scrollHeight

总结一下：

如下图所示，当内部内容为未超出时，ij项的值与clientWidth/Height的值相同；

但是当内部内容的值超出时，计算的是内部元素的大小，包括content+padding+border+margin,下图中scrollWidth与scrollHeight相差的10px来自于margin-right被吃掉了（对margin-left设置多大的像素都无效）

附：10px黑色外边框为body元素，1px黑色边框为父盒子，1px红色外边框为子盒子，滚动条的宽/高为17px

k、document.body.scrollLeft

l、document.body.scrollTop

总结一下：

kl项表示元素被滚动条卷曲的部分，还有一点，kl项也是可写的属性；

三、Event对象内的坐标信息

a、event.clientX

b、event.clientY

c、event.pageX

d、event.pageY

e、event.x

f、event.y

g、event.offsetX

h、event.offsetY

i、event.screenX

j、event.screenY

总结一下

ab项表示相对于浏览器可视区域左上角（0,0）距离

cdef项与ab项表现一致

gh项表示相对于事件源（即事件作用的对象）左上角（0,0）的距离

ij项相当于设备屏幕左上角（0,0）的距离

 

四、element.getBoundingClientRect()

该方法返回一个DOMRect对象，包含一组只读属性,除width与height外，剩余属性都表示元素相对于浏览器视口的距离。具体表现如下图所示。

 

五、jQuery中的宽高API

a、width()

b、height()

总结一下：

ab项在不传参的情况下，可以获取元素的宽高；

若ab项传入宽高数值，则会对元素的宽高进行修改，当然也可以传入修改函数，具体细节不载展开。

c、innerWidth()

d、innerHeight()

总结一下：

cd项获取元素的content+padding;与js原生clientWidth/Height获取到的值相同。

e、outerWidth()

f、outerHeight()

总结一下:

默认在不传值的情况下获取的是元素的content+padding+border；相当于js原生的offsetWidth/Height属性。

但如果我们为ef项传入Boolean的true，就可以获取元素的content+padding+border+margin

g、scrollLeft()

h、scrollTop()

总结一下：

gh项与原生的js属性scrollLeft/scrollTop相同，都表示被滚动条卷去的宽高；当然，也可以传入参数值来修改被滚动条卷去的宽高。

i、offset()

总结一下：

i项获取的是距离document的top，left，与getBoundingClientRect()函数获取的top，left值相同。(都是从元素的border的左上角到document的（0,0）点)

j、position()

总结一下：

获取距离父元素的top、left的值，从元素的margin的左上角到父元素的margin左上角