簡單說下:offsetTop offsetTop: 為只讀屬性。 返回的是一個數字。 它返回當前元素相對於其 offsetParent 元素的頂部內邊距的距離。 它等價於offsetTop==>元素到offsetParent頂部內邊距的距離 offsetTop並不是指距離瀏覽器視窗最左邊的位置。 我 ...
簡單說下:offsetTop
offsetTop: 為只讀屬性。 返回的是一個數字。
它返回當前元素相對於其 offsetParent 元素的頂部內邊距的距離。
它等價於offsetTop==>元素到offsetParent頂部內邊距的距離
offsetTop並不是指距離瀏覽器視窗最左邊的位置。
我的理解：offsetTop的偏移是指當前元素相對其距離自己最近的具有定位屬性的父級元素的偏移值。
margin:會影響它的值。 定位的值會影響。 border也會影響。但是padding不會影響。
offsetLeft跟offsetTop是一樣的。他們是一對的。
offsetTop 的簡單使用
<body>
<div id="title">
我是標題
</div>
<div id="nav">
我是導航
</div>
<div id="cont">
我是內容
</div>
</body>
<script>
let cont = document.getElementById('cont')
let dingbuTop = cont.offsetTop;
console.log('dingbuTop', dingbuTop); //輸出的是50
/* 之所以是50=21+21+*
div的預設高度是21；有兩個div。 body的外邊距margin:8px；
*/
</script>
margin 會影響它的值(margin-bottom也不會), border也會影響，padding不會
<style>
#cont {
padding: 10px;
background: red;
margin-top: 50px;
}
</style>
<body>
<div id="title">
我是標題
</div>
<div id="nav">
我是導航
</div>
<div id="cont">
我是內容
</div>
</body>
<script>
let cont = document.getElementById('cont')
let dingbuTop = cont.offsetTop;
// body的外邊距margin:8px;div的預設高度是21；有兩個div。
//padding 並沒有影響它的值
console.log('dingbuTop', dingbuTop); //輸出的是 8+21+21+50=100
</script>
定位會影響它的值
<style>
#cont {
background: red;
position: absolute;
top: 150px;
left: 150px;
}
</style>
<body>
<div id="title">
我是標題
</div>
<div id="nav">
我是導航
</div>
<div id="cont">
我是內容
</div>
</body>
<script>
let cont = document.getElementById('cont')
let dingbuTop = cont.offsetTop;
console.log('dingbuTop', dingbuTop); //輸出的是150
</script>
當前元素相對其距離自己最近的具有定位屬性的父級元素的偏移
<style>
#cont {
margin-top: 100px;
position: relative;
}
#son {
background: pink;
position: absolute;
left: 10px;
top: 10px;
}
</style>
<body>
<div id="cont">
<div id="son">
son
</div>
</div>
</body>
<script>
let son = document.getElementById('son')
let dingbuTop = son.offsetTop;
console.log('dingbuTop', dingbuTop); //輸出的10
</script>
子絕父相-子元素距離屏幕頂部的距離
<style>
#cont {
margin-top: 100px;
position: relative;
background: #000;
}
#son {
background: pink;
position: absolute;
left: 10px;
top: 10px;
}
</style>
<body>
<div id="cont">
<div id="son">
son
</div>
</div>
</body>
<script>
let son = document.getElementById('son')
let dingbuTop = son.offsetTop + son.offsetParent.offsetTop;
console.log('dingbuTop', dingbuTop); //輸出的是 110
</script>
offsetParent
HTMLElement.offsetParent 是一個只讀屬性.
返回一個指向最近的（指包含層級上的最近）包含該元素的定位元素或者最近的 table, td, th, body 元素。
當元素的 style.display 設置為 "none" 時，offsetParent 返回 null。
等價於offsetParent：返回指向最近的一個具有定位的祖宗元素（relative，absolute，fixed）。
若祖宗都不符合條件，offsetParent為body。
<div id="cont">
<div id="son1">
son1
</div>
<div id="son">
son
</div>
</div>
let son = document.getElementById('son')
let ele = son.offsetParent;
console.log('ele', ele); // 輸出的是body這個元素 若祖宗都不符合條件，offsetParent為body。
遇見問題，這是你成長的機會，如果你能夠解決，這就是收穫。
作者：晚來南風晚相識出處：https://www.cnblogs.com/IwishIcould/
想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯繫你；(っ•̀ω•́)っ✎⁾⁾！
如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關註博主，在此感謝！
萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！
想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯繫你；(っ•̀ω•́)っ✎⁾⁾！
支付寶
微信
本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接 如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。
