整理js中的各种width/height

window相关的宽高

window.innerWidth 内部宽度
window.innerHeight 内部高度
window.outerWidth 外部宽度
window.outerHeight 外部高度
window.screen.width
window.screen.height
window.screen.availHeight
window.screen.availWidth
window.screenTop
window.screenLeft

window相关宽高存在浏览器兼容问题，innerHeight和outerHeight是不支持IE9以下版本的，而screen系列则不存在兼容问题。

document相关的宽高

docment下有三类属性：

1.与client相关的宽高

clientLeft和clientTop
该属性是只读的，并且返回的是数值类型，clientLeft表示的是一个元素左边框的宽度，但是如果元素内容溢出造成左边出现滚动条，那么clientLeft就要包括滚动条的宽度，不过这种情况非常罕见。clientTop表示元素顶部边框的宽度。
clientWidth和clientHeight
该属性也是只读的，返回数值类型，clientWidth表示的是内容区域的高度，但是不包括边框和滚动条。当不设置box-sizing:border-box的时候，clientWidth的值为width+paddingLeft+paddingRight-左/右边滚动条的宽度，当设置box-sizing:border-box的时候，clientWidth的值为width-borderLeft-borderRight–下边滚动条的高度。同理clientHeight表示的是内容区域的宽度，计算与clientWidth类似。

2.与offset相关的宽高

offsetLeft和offsetTop

该属性是只读的，返回数值类型，其表示相对于最近的祖先定位元素（即CSS position属性不为static的元素）的左右偏移量，当其祖先没有定位元素的时候，就是相当于html文档左上角的偏移量。

offsetWidth和offsetHeight

该属性是只读的，返回数值类型，其返回元素的宽高，与clientWidth/clientHeight相比，其包括变和滚动条的宽/高。当不设置box-sizing:border-box的时候，offsetWidth的值为width+paddingLeft+paddingRight+左/右边滚动条的宽度，当设置box-sizing:border-box的时候，offsetWidth的值为width。offsetHeight计算与offsetWidth类似。

3.与scroll相关的宽高

与scroll相关的宽高属性有如下几个：

scrollLeft和scrollTop

该属性获取或设置元素的内容向左滚动/向下滚动的像素数，可读可写，其返回/设置数值类型。当滚动条是在右边的时候，则scrollLeft为0。
scrollLeft也可以设置为任何整数，但是当元素没有滚动条的时候或者设置整数小于0的时候，scrollLeft设置为0；当设置大于可滚动内容的最大值的值，scrollLeft设置为最大值。

与鼠标相关的属性

clientX/clientY
其表示的是鼠标相对于window不包括任务栏在内内部窗口的偏移量。
offsetX/offsetY
其表示鼠标相对于被点击元素的的border左上角开始的坐标，该属性在IE中兼容性不错，但是在一些旧版本的火狐浏览器中没有该属性。并且不同浏览器左上角的基准点不同，对于offsetX而言，在IE浏览器中，以内容区左上角为基准点并不包括边框，如果点击点在左边框的话，其会返回负值，而在chrome上是以变宽左上角为基准点。所以，为了兼容火狐浏览器和IE浏览器，可以使用以下代码来实现获取offsetX/offsetY，这两个值默认以chrome的标准为主;

function getOffsetX(e){
    var e =e||window.e;
    var targetObj = e.target || e.srcElement;
    var rect = targetObj.getBoundingClientRect();
    var clientx = e.clientX;
    return clientx - rect.left;
}
function getOffsetY(e){
    var e = e || window.event;
    var targetObj = e.target || e.srcElement;
    var rect = targetObj.getBoundingClientRect()；
    var clientY = e.clientY;
    return clientY - rect.top;
}

pageX/pageY
该属性为鼠标相对于document的坐标，其会随着页面滚动而改变，该属性为只读属性，且不兼容IE8。
screenX/screenY
该属性为鼠标相对于显示屏屏幕的偏移坐标，其兼容性不错。
x/y
该属性相当于clientX/clientY,但是对于一些旧版本的火狐并不兼容，所以可以不使用这个。
layerX/layerY
其获取的是触发点相对于被点击元素的距离，数值与offsetX/offsetY相同，其有很大的限制就是点击元素要设置为position:relative或absolute才行，所以一般不使用该属性。