【随手记】window下各种视口和坐标总结

一、window下各种视口和坐标

window下常用尺寸属性含义

属性	说明	备注
window.screenWidth、window.screenHeight	设备屏幕分辨率（包括不可用部分）
clientWidth、clientHeight	获取浏览器可用视口宽高（不含border和边线）
offsetWidth、offsetHeight	获取浏览器可用视口宽高（含border和边线）
offsetTop、offsetleft	获取当前元素到 定位父节点 的top方向的偏移量
scrollWidth、 scrollHeight	元素内容真实的宽高
innerWidth、innerHeight	浏览器窗口可视区宽高（不包括浏览器控制台、菜单栏、工具栏）（包含滚动条）
scrollTop、scrollLeft	被滚动遮挡的偏移量
window.screen.availHeight、window.screen.availWidth	屏幕可用宽高
outerWidth、outerHeight	整个浏览器的宽高（包括浏览器控制台、菜单栏、工具栏）
点击坐标
clientX、clientY	点击位置距离当前body可视区域的x，y坐标
pageX、pageY	对于整个页面来说，包括了被卷去的body部分的长度
screenX、screenY（x、y一样）	点击位置距离当前电脑屏幕（可用部分）的x，y坐标
offsetX、offsetY	相对于带有定位的父盒子的x，y坐标

二、getBoundingClientRect方法

三、真假判断总结