<!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>
