一、JS获取页面的各种距离
1.screen系列
screen.width:屏幕的宽度
screen.height:屏幕的高度
2.style系列
element.style.width：当前对象的宽度。
element.style.height：当前对象的高度。
element.style.left：当前对象的left值。
element.style.top：当前对象的top值。
几点说明
- style系列属性必须是行内的属性才能获取得到，设置的话就没任何的约束了
- left 和 top 都是针对的父级的定位元素而言的，没有的话就是默认 body
- 这里的width 和height 是不包含padding 和border 的
3.offset系列
element.offsetParent：当前对象的最近的定位父级元素
element.offsetWidth：当前对象的宽度（width+padding+border）
element.offsetHeight：当前对象的高度（Height+padding+border）
element.offsetLeft：当前对象到其 offsetParent 左边的距离
element.offsetTop：当前对象到其 offsetParent 上边的距离
offsetParent的确定
- 元素自身有fixed定位，offsetParent的结果为null
- 元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为
<body> - 元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素
<body>元素的 offsetParent 是null
element.offsetWidth和style.width区别
- style.width返回值除了数字外还带有单位px；
- 如对象的宽度设定值为百分比宽度,则无论页面变大还是变小，style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值；
- 如果没有给 HTML 元素指定过 width样式，则 style.width 返回的是空字符串；
- style.width不包含border和padding。
关于偏移量的一些注意事项
- 所有偏移量属性都是只读的
- 如果给元素设置了display:none，则它的偏移量属性都为0
- 每次访问偏移量属性都需要重新计算，而且这个计算是比较耗费时间的，所以在满足需要的前提下，可以用一个变量将偏移量保存起来，避免无谓的重复访问
- offsetHeight 和 offsetWidth 是包含滚动条的宽度的
4.client系列
element.clientWidth：获取对象可见内容的宽度（width + padding）
element.clientHeight：获取对象可见内容的高度（height + padding）
element.clientLeft:：获取对象的左边框的宽度
element.clientTop：获取对象的上边框的宽度
5.scroll系列
element.scrollWidth:获取对象的滚动宽度
element.scrollHeight: 获取对象的滚动高度
element.scrollLeft：就是元素有滚条的情况下，左滚的距离(width+padding一体)
element.scrollTop：这个就是元素中内容上滚的距离(height+padding一体)
几点说明
- 在元素没有滚条的情况下 scrollWidth 和 clientWidth是相等的
- 元素中的内容超过元素的范围的时候，设置
overflow：auto就会有滚动条
关于获取页面的scrollTop（scrollLeft）兼容性写法
- body是DOM对象里的body子节点，即
<body>标签；documentElement 是整个节点树的根节点root，即<html>标签； - 不同的浏览器针对整个页面的scrollTop 的获取方式是有差异的，一些是针对body而言，一些是针对documentElement
- JS中完美兼容各大浏览器的scrolltop方法如下
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
二.js获取页面坐标数据
1.client系列
- event.clientX 和 event.clientY：点击位置距离当前body可视区域的x，y坐标
2.screen系列
- event.screenX 和 event.screenY： 点击位置距离当前电脑屏幕的x，y坐标
3.offset系列
- event.offsetX 和 event.offsetY：相对于带有定位的父盒子的x，y坐标（含padding不含border和margin）
4.layer系列（IE8以及以下版本没有）
- event.layerX 和 event.layerY：就是 offset 的基础上加上 border 的宽度
5.XY系列（FF没有）
- event.x 和 event.y：相对可视区域的XY坐标，不就和event.clientX 和 event.clientY一样吗
6.page系列 （IE8以及以下版本没有）
- event.pageX和event.pageY：对于整个页面来说，包括了被卷去的body部分的长度
参考文章：https://blog.csdn.net/weixin_41342585/article/details/80659736
