jQuery獲得元素位置offset()和position()的區別

jQuery 中有兩個獲取元素位置的方法offset()和position(),這兩個方法之間有什麼異同

offset():

獲取匹配元素在當前視口的相對偏移。

返回的對象包含兩個整形屬性:top 和 left。此方法只對可見元素有效。
.offset()方法可以讓我們重新設置元素的位置。這個元素的位置是相對於document對象的。如果對象原先的position樣式屬性是 static的話,會被改成relative來實現重定位。

position():

獲取匹配元素相對父元素的偏移。

返回的對象包含兩個整形屬性:top 和 left。爲精確計算結果,請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。

01 / Get *real* offsetParent
02 var offsetParent = this.offsetParent(),
03 // Get correct offsets
04 offset = this.offset(),
05 parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset();
06 // Subtract element margins
07 // note: when an element has margin: auto the offsetLeft and marginLeft
08 // are the same in Safari causing offset.left to incorrectly be 0
09 offset.top -= num( this, ’marginTop’ );
10 offset.left -= num( this, ’marginLeft’ );
11 // Add offsetParent borders
12 parentOffset.top += num( offsetParent, ’borderTopWidth’ );
13 parentOffset.left += num( offsetParent, ’borderLeftWidth’ );
14 // Subtract the two offsets
15 results = {
16 top: offset.top - parentOffset.top,
17 left: offset.left - parentOffset.left
18 };

使用position()方法時事實上是把該元素當絕對定位來處理,獲取的是該元素相當於最近的一個擁有絕對或者相對定位的父元素的偏移位置。
使用position()方法時如果其所有的父元素都爲默認定位(static)方式,則其處理方式和offset()一樣,是當前窗口的相對偏移
使用offset()方法不管該元素如何定位,也不管其父元素如何定位,都是獲取的該元素相對於當前視口的偏移
例如:要顯示的元素存放在DOM的最頂端或者最底端(即其父元素就是body),這時用offset()是最好的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章