丁酉年六月初一，周六，有雨
宜敲代码，玩游戏；不宜出门，浪。
最近有些迷失，不过已经找到目标了，也一定会慢慢调整好的。（我是亮并非瑜）
一方面督促自己，一方面为了不辜负书哥大人的关注，我还是会不定期整理一下知识点，以待时变~
进入正题，关于js中“三大家族”以及其他距离方面的知识点，一直没有好好整理过，每次想到都觉得是一根刺，今天终于要拔掉了~
js中关于距离有三个家族，他们分别是offset，client，scroll；接下来我会写一个简单的demo将三大家族以及相关的属性或方法具体解释一下：
demo
首先定义一个如下的元素结构：
<body>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<div class="grandfather">
<div class="father">
<div class="self" id="self">
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
</body>最上面<br>为了将页面撑起，有一定的卷去高度；
内部的<br>为了将元素撑起，有一定的卷去高度；
具体样式如下：
html,body{
margin: 0;
padding: 0;
}
.grandfather{
width: 500px;
height: 500px;
position: relative;
left: 50px;
top: 50px;
border: 5px solid #c1c1c1;
}
.father{
width: 400px;
height: 400px;
position: absolute;
top: 50px;
left: 50px;
border: 10px solid #d1d1d1;
}
.self{
width: 200px;
height: 200px;
margin: 50px;
padding: 20px;
border: 10px solid #b1b1b1;
background-color: skyblue;
overflow: auto;
}最终页面如下
关于大小
首先获取到元素：
var myDiv = document.getElementById('self');元素大小
offset 获取的是盒子的所占的大小（margin不算是盒子的主体部分），也就是说实际大小是 border+ padding+ width/height
console.log(myDiv.offsetWidth); /*260*/
console.log(myDiv.offsetHeight); /*260*/client 获取的是盒子可视的大小，也就是（padding + width/height - 滚动条）
console.log(myDiv.clientWidth); /*223*/
console.log(myDiv.clientHeight); /*223*/scroll 获取的是盒子中内容的真实高度，也就是（padding + content）
console.log(myDiv.scrollWidth); /*312*/
console.log(myDiv.scrollHeight); /*328*/获取css中元素width/height
getComputedStyle / currentStyle有兼容性问题，获取的结果带有px，需要使用 parseInt
console.log(getComputedStyle(myDiv, false)["width"]) /*183px*/
console.log(getComputedStyle(myDiv, false)["height"]) /*183px*/窗口的文档显示区大小
获取到窗口的显示区大小，需要处理一定的兼容性问题：
function getClient() {
return {
width: window.innerWidth || document.documentElement.clientWidth
|| document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight
|| document.body.clientHeight || 0
}
}
console.log(getClient().width);
console.log(getClient().height);关于浏览器或者屏幕相关的数据，可自行百度~ Screen对象等
关于距离
元素距离
offset 获取的是相对于offsetParent的距离
console.log(myDiv.offsetLeft); /*50*/
console.log(myDiv.offsetTop); /*50*/client 获取的是盒子边框的宽度（很少用）
console.log(myDiv.clientLeft); /*10*/
console.log(myDiv.clientTop); /*10*/scroll 获取的是盒子内容卷去的高度（和滚动条相关）
console.log(myDiv.scrollLeft); /*内容卷去的高度*/
console.log(myDiv.scrollTop); /*内容卷去的宽度*/获取css中元素left/top
getComputedStyle / currentStyle有兼容性问题，获取的结果带有px，需要使用 parseInt
console.log(getComputedStyle(myDiv, false)["Left"])
/*undefined(因为盒子未定位，没有left和top)*/
console.log(getComputedStyle(myDiv, false)["Top"])
/*undefined（因为盒子未定位，没有left和top）*/元素boder外边缘 距离窗口 （getBoundingClientRect()）
console.log(myDiv.getBoundingClientRect().left); /*160 (50+5+50+10+50)*/
console.log(myDiv.getBoundingClientRect().top); /*160*/元素boder外边缘距离页面文档，累加offset
function getToPage(){
var _myDiv = myDiv;
var divPageY = 0;
var divPageX = 0;
while(_myDiv.offsetParent){
divPageY += _myDiv.offsetTop + parseInt(getComputedStyle(_myDiv.offsetParent, false)["border-top-width"]);
divPageX += _myDiv.offsetLeft + parseInt(getComputedStyle(_myDiv.offsetParent, false)["border-left-width"]);
_myDiv = _myDiv.offsetParent;
}
return {divPageY: divPageY, divPageX: divPageX}
}
console.log(getToPage().divPageX);
console.log(getToPage().divPageY);页面卷去距离
需要处理一下兼容性问题。。
function getScroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop
|| document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft
|| document.body.scrollLeft || 0
};
}
console.log(getScroll().top)
console.log(getScroll().left)鼠标的距离
需要获取到鼠标点击等事件的e ；有兴趣可以打印e 研究其包含的各种属性；
myDiv.addEventListener('click',function(e){
var e = e || window.event;
console.log(e.offsetX, e.offsetY); /*鼠标到自身border的距离*/
console.log(e.clientX, e.clientY); /*鼠标到屏幕距离*/
console.log(e.pageX, e.pageY); /*鼠标到页面文档的距离*/
})暂时能想到的相关内容就这么多了，如果后续有可以补充的，也会补充进来。
最后贴一张最经典的图，以便更好的理解！
