JS基础 - JS中的距离
在 JS 中可以获取到许多距离的值，但是很容易混淆，下面对能够获取到的值进行一个整理。
获取元素的位置信息
调用API
getComputedStyle()
getComputedStyle() 获取的是元素 css 定义的属性，css 中是什么就返回什么，举个例子：
#wrapper{
width:100px;
height:100px;
padding:10px;
margin:4px;
border:1px solid red;
}
document.querySelector('#wrapper').getComputedStyle().width
getBoundingClientRect()
getBoundingClientRect() 获取的是元素的位置信息：left、right、top、bottom 以及 width、height。
返回的 width = offsetWidth，height = offsetHeight。
offset*
一句话：除了 margin 我都要。
offsetWidth / Height
offsetWidth = cssWidth + padding + border;
offsetHeight = cssHeight + padding + border;
注意：如果将元素的box-sizing设置为border-box，offsetWidth 就等于 cssWidth。
举个例子：
#wrapper{
width:100px;
height:100px;
padding:10px;
margin:4px;
border:1px solid red;
}
<div id="wrapper"></div>
输出的结果：
wrapper's offsetHeight：122px
wrapper's offsetWidth：122px
offsetLeft / Top
offsetLeft & offsetTop = 相对祖先元素（position 不为 static 的元素）的偏移量，或者说两条边框之间的距离，不计算边框的宽度。
举个例子：
wrapper 未设置 position
#wrapper{
width:100px;
height:100px;
padding:10px;
margin:4px;
border:1px solid red;
}
#content{
width:50px;
height:50px;
padding:5px;
margin:3px;
border:1px solid red;
}
<div id="wrapper">
<div id="content"></div>
</div>
输出的结果：
wrapper's offsetLeft：4px
wrapper's offsetTop：4px
content's offsetLeft：18px（ 相对于 html 的偏移量 = 10px+4px+1px+3px ）
content's offsetTop：18px
将wrapper 的 position 设置为 relative
#wrapper{
width:100px;
height:100px;
padding:10px;
margin:4px;
border:1px solid red;
position:relative;
}
输出结果
content's offsetLeft：13px（ 相对于 warpper 元素的偏移量 = 10px+3px ）
content's offsetTop：13px
client*
clientWidth / Height
offset 减去 border 和滚动条的宽度就等于 client。
clientWidth = offsetWidth - border - scrollBar；
clientHeight = offsetHeight - border - scrollBar；
clientLeft / Top
没有（左侧/顶部）滚动条时，clientLeft 与 clientTop 等于 border 的宽度；
有（左侧/顶部）滚动条时，等于 border 的宽度 + 滚动条的宽度。
特殊情况
当我们在获取<html>元素（document. documentElement）尺寸的时候，client 给出的是 viewport （浏览器可视区域）的尺寸，而 offset 给出的是<html>元素的尺寸，例如：浏览器宽度是 1920px，当修改<html>元素的宽度为 10% 时，document. documentElement.clientWidth 为 1920，document. documentElement.offsetWidth 为 192。
获取滚动位置信息
scrollWidth / Height
通过 Element.scrollWidth/Height，可以获取到溢出的宽度/高度：
scrollWidth = clientWidth + 溢出内容尺寸；
scrollHeight = clientHeight + 溢出内容尺寸；
scrollTop / Left
因为浏览器间的兼容性差异，有三种API可以获取到 scrollTop/Left 的值，依次判断是否能够获取到值即可：
let top = Element.scrollTop || window.pageYOffset || document.body.scrollTop;
scrollTop：这个元素的顶部到视口可见内容的顶部的距离，当一个元素的内容没有产生垂直方向的滚动条，那么 scrollTop 为 0，scrollLeft 同理。
获取鼠标的位置信息
mouseover / mouseenter 等鼠标事件都能够获取到一些位置信息，他们的参考坐标轴各不相同：
clientX / Y
以【浏览器的显示区域左上角的顶点】为坐标原点。
offsetX / Y
以【元素自身左上角的顶点】为坐标原点。
layerX / Y
以【有定位属性不为 static 的父元素的左上角的顶点】为坐标原点，如果自身的定位属性不为 static，则以自身的左上角顶点为坐标原点，且一直向上寻找到 body，如果依然没有符合的元素，则以 body 的左上角顶点为坐标原点。
pageX / Y
以【当前文档的左上角的顶点】为坐标原点，也就是说如果页面的内容不发生变化，那么每次获取的位置是恒定的。
screenX / Y
以【屏幕左上角的顶点】为坐标原点。
JS基础 - JS中的距离