JavaScript宽高和偏移

详解请阅：window、Element、HTMLElement、MouseEvent 四个对象。

window相关

window.innerHeight/Width:浏览器视口高度/宽度(包括滚动条)。

window.outerHeight/Width:浏览器屏幕高度/宽度(包括滚动条，不包括状态栏)。

window.screen相关

window.screen.height/width:电脑屏幕高度/宽度。

window.screen.availHeight/availWidth:电脑屏幕可用高度/宽度(不包括状态栏)。

window.screenTop/screenLeft:电脑屏幕顶部和左部与浏览器顶部和左部的距离。

window.screenY/screenX:相当于window.screenTop/screenLeft。

window.scrollX/scrollY:相当于document.body.scrollLeft/scrollTop值。

window.pageXOffset/pageYOffset:相当于window.scrollX/scrollY

Element.clientHeight/clientWidth

只读

元素 CSS height/width + CSS padding - 滚动条高度 (如果存在)。如果元素没有设置css属性，那么clientHeight/clientWidht的值取决于元素内容。

备注：document.body也是一个元素==>body元素。

换言之，这两个属性值是动态的。

Element.scrollHeight/scrollWidth

只读

元素内容高度和宽度，包括溢出导致的不可见内容。包括padding但不包括border和margin。

也就是元素实实在在的content+padding的大小

Element.clientLeft/clientTop

只读

元素的左边框和上边框的宽度，不包括margin和padding。

备注：document.body也是一个元素==>body元素

Element.scrollLeft/scrollTop

可读可写

获取或设置滚动的距离。对于body元素而言，该值就是页面在视口上部和左部溢出的部分。

HTMLElement.offsetHeight/offsetWidth

只读

元素的像素高度和宽度，包含该元素的content+padding+border，且是一个整数。如果出现滚动条，也包括滚动条的宽高。

HTMLElement.offsetLeft/offsetTop

只读

返回当前元素左/上border外边界相对于offsetParent元素的左/上border内边界的偏移值。(通常只用在position不为static的元素上)

MouseEvent.clientX/Y

只读

鼠标事件相对于浏览器可视区左上角的坐标

MouseEvent.pageX/Y

只读

鼠标事件相对于整个网页左上角的坐标

MouseEvent.screenX/Y

只读

鼠标事件相对于电脑屏幕左上角的坐标

MouseEvent.offsetX/Y

只读

鼠标事件相对于事件源元素左上角padding外边界的坐标

MouseEvent.X/Y

只读

MouseEvent.clientX/Y的别名