event事件的各种距离含义

​ 通过js控制页面布局时，会有动态获取系统的距离，总结了一下几种方法。以下都是都是不带参数的

1、浏览器可视化窗口大小

​ 所谓可视化是指我们能够看得到的地方，用来展示html内容窗口，其中不包括检查部分和浏览器头部部分的。

• window.innerHeight 浏览器可视化窗口的高度，
• window.innerWidth 浏览器可视化窗口的宽幅

2、当前浏览器大小

​ 指的是整个浏览器的尺寸。

• window.outerWidth 浏览器的宽度，（在全屏的情况下 =window.innerWidth）
• window.outerHeight 浏览器的高度

3、元素的offsetLeft 和 offsetTop 与相对定位有关

​ 例如： box1.offsetLeft; 表示盒子box1到 最近的父级元素 且是有定位的元素 的左边距离。如果父级 以上都没有定位的，就以body为标准计算距离。

4、event.clientX 、 event.clientY 可视化窗口

​ event事件基本都是配合鼠标的各种事件（onclick、 onmouseover 、onmousedown）等一起使用的。

​ event.clientX表示此时鼠标的光标的距离可视化窗口顶部的距离。

​ event.clientY表示此时鼠标的光标的距离可视化窗口左边的距离。

5、event.screenX 、event.screenY 屏幕

​ 鼠标光标距离屏幕（显示器） 左边、顶端的距离，（0，0）点左上角

6、event.pageX 、event.pageY 文档

​ 鼠标光标距离文档的距离，参考点（0,0）为文档的左上角，文档尺寸大于可视化窗口时就会出现滚动条。

7、event.offsetX、 event.offsetY

​ 鼠标光标距离当前父元素的左边，顶部距离。参考点也是父元素的左上角。

8、offsetWidth 、 offsetHeight

​ 获取自身的宽度，高度

形象的标出部分属性。

offsetHeight

​ 获取自身的宽度，高度

形象的标出部分属性。