<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
// offsetParent? 獲取他的父參照物(不一定是父元素);
// 父參照物和它的父元素沒(méi)有必然的聯(lián)系,父參照物查找:最外層元素是所有后代元素的父參照物，而基于position:relative/absolute/fixed可以讓元素脫離文檔流(一個(gè)新的平面，)從而改變?cè)氐母竻⒄刮?/p>
//document.body.offsetParent=null;
// offsetTop? ? 距離其父參照物的上偏移
// offsetLeft? ? 距離服父參照物的左偏移(當(dāng)前元素的外邊框到父參照物的里邊框)
/*
offset 封裝當(dāng)前元素距離body的左/上偏移(不論其父參照物是誰(shuí))
@params
curEle:current element? 當(dāng)前要操作的元素
@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瀏覽器
//存在父級(jí)參照物，而且沒(méi)有找到body
? ? ? ? while (par &&par.tagName!=='BODY'){
//在原有偏移的基礎(chǔ)上累加:父參照物的邊框，父參照物的偏移
? ? ? ? ? ? if (!/MSIE 8\.0/.test(navigator.userAgent)){
//在ie8中偏移值自己計(jì)算了，不需要我們加邊框的值
//navigator.userAgent獲取當(dāng)前瀏覽器的版本信息
? ? ? ? ? ? ? ? l+=par.clientLeft;
t+=par.clientTop;
}
l+=par.offsetLeft;
t+=par.offsetTop;
//繼續(xù)獲取上級(jí)參照物
? ? ? ? ? ? par=par.offsetParent;
return{
top:t,
left:l
? ? ? ? ? ? }
}
}
</script>
</html>
