js中offsetLeft/offsetTop與jq中offset().left/offset().top的區別

1.offsetLeft/offsetTop

在頁面任一元素的offsetLeft總是找到離其最近的已經定位的父元素或祖先元素定位,如果沒有,就根據根節點body定位,然後獲取其left值。

2.offset().left/offset().top

返回或設置匹配元素相對於文檔的偏移(位置)。 無論元素的父元素或祖先元素的position屬性是什麼,總是計算相對於文檔的位置

示例:

#parent{width: 300px;height: 100px;margin: 0 auto;border: 1px solid #ccc;position: relative;}
<div id="parent">
    <p id="child">測試offsetLeft與offset().left的區別</p>
</div>
var left = document.getElementById('child').offsetLeft;
var left1 = $('#child').offset().left;
console.log(left);//結果始終是0
console.log(left1);//結果是相對於文檔的偏移
發佈了24 篇原創文章 · 獲贊 25 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章