javascript的一些位置尺寸属性

时间旧了，有些属性都玩了，回忆下。

一、尺寸

window.innerWidth 窗口的可视区域（包括滚动条的宽度）
window.innerHeight 窗口的可视区域（包括滚动条的高度）
window.outerWidth 浏览器界面宽度（win10有隐藏边框，微信截图可以看出）
window.outerHeight 浏览器界面高度
window.screen.width 设备屏幕的宽度
window.screen.height 设备屏幕的高度
window.screem.availWidth 设备屏幕排除状态栏的宽度
window.screem.availHeight 设备屏幕排除状态栏的高度

domEle.clientWidth 文档节点的可视区域宽度（包括盒内容和内边距，排除边框）
domEle.clientHeight 文档节点的可视区域高度（包括盒内容和内边距，排除边框）
domEle.offsetWidth 文档节点的可视区域宽度（包括盒内容、内边距和边框）
domEle.offsetHeight 文档节点的可视区域高度（包括盒内容、内边距和边框）
domEle.scrollWidth 文档节点的实际宽度（包括盒内容和内边距，排除边框）
domEle.scrollHeight 文档节点的实际高度（包括盒内容和内边距，排除边框）

二、位置

元素位置

边框盒子：包括边框到内容的盒子
内边距盒子：包括内边距到内容的盒子
内容盒子：包括内容的盒子
相对父节点：父级以上有position: absolute | realtive | fixed | sticky属性的节点
offsetParent 文档节点的相对父节点，没有则是body
domEle.offsetLeft 文档节点边框盒子左侧距离相对父节点（没有相对父节点则是html节点）边框盒子左侧的距离
domEle.offsetTop 文档节点边框盒子上侧距离相对父节点（没有相对父节点则是html节点）边框盒子上侧的距离
domEle.clientLeft 文档节点左边框的厚度
domEle.clientTop 文档节点上边框的厚度
domEle.scrollTop 文档节点被卷走的高度
domEle.scrollLeft 文档节点被卷走的宽度

事件位置

event.clientX 触发点距离浏览器可视区域左侧的距离
event.clientY 触发点距离浏览器可视区域上侧的距离
event.offsetX 触发点距离事件节点内边距盒子的左侧距离
event.offsetY 触发点距离事件节点内边距盒子的上侧距离
event.layerX 触发点距离事件节点边框盒子的左侧距离
event.layerY 触发点距离事件节点边框盒子的上侧距离
event.x 同event.clientX
event.y 同event.clientY
event.pageX 触发点距离页面左侧的距离
event.pageY 触发点距离页面上侧的距离
event.screenX 触发点距离设备屏幕左侧的距离
event.screenY 触发点距离设备屏幕上侧的距离