<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
// offsetParent 获取他的父参照物(不一定是父元素);
// 父参照物和它的父元素没有必然的联系,父参照物查找:最外层元素是所有后代元素的父参照物，而基于position:relative/absolute/fixed可以让元素脱离文档流(一个新的平面，)从而改变元素的父参展物
//document.body.offsetParent=null;
// offsetTop 距离其父参照物的上偏移
// offsetLeft 距离服父参照物的左偏移(当前元素的外边框到父参照物的里边框)
/*
offset 封装当前元素距离body的左/上偏移(不论其父参照物是谁)
@params
curEle:current element 当前要操作的元素
@return
[Object] 包含上/左偏移的信息 => {top:xxx,left:xxx}
by sunlong on 2020/1/3
*/
function offset(curEle) {
let par=curEle.offsetParent,
l=curEle.offsetLeft,
t=curEle.offsetTop;
// 兼容ie8浏览器
//存在父级参照物，而且没有找到body
while (par &&par.tagName!=='BODY'){
//在原有偏移的基础上累加:父参照物的边框，父参照物的偏移
if (!/MSIE 8\.0/.test(navigator.userAgent)){
//在ie8中偏移值自己计算了，不需要我们加边框的值
//navigator.userAgent获取当前浏览器的版本信息
l+=par.clientLeft;
t+=par.clientTop;
}
l+=par.offsetLeft;
t+=par.offsetTop;
//继续获取上级参照物
par=par.offsetParent;
return{
top:t,
left:l
}
}
}
</script>
</html>
