深入剖析Jquery中的offset()和position()

深入剖析Jquery中的offset()和position()

 

 

jquery 中有兩個獲取元素位置的方法offset()和position()，這兩個方法之間有什麼異同？使用的時候應該注意哪些問題？什麼時候使用offset(),什麼時候又使用position()呢？

先看看這兩個方法的定義。

offset():

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

返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。

 

position():

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

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

 

真的就這麼簡單嗎？實踐出真知。

 

先來看看在jquery框架源碼裏面，是怎麼獲得position()的：

// Get *real* offsetParent
var offsetParent = this.offsetParent(),

// Get correct offsets
offset = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset();

// Subtract element margins
// note: when an element has margin: auto the offsetLeft and marginLeft
// are the same in Safari causing offset.left to incorrectly be 0
offset.top -= num( this, 'marginTop' );
offset.left -= num( this, 'marginLeft' );

// Add offsetParent borders
parentOffset.top += num( offsetParent, 'borderTopWidth' );
parentOffset.left += num( offsetParent, 'borderLeftWidth' );

// Subtract the two offsets
results = {
top: offset.top - parentOffset.top,
left: offset.left - parentOffset.left
};

 

1. 使用position()方法時事實上是把該元素當絕對定位來處理，獲取的是該元素相當於最近的一個擁有絕對或者相對定位的父元素的偏移位置。
2. 使用position()方法時如果其所有的父元素都爲默認定位（static）方式，則其處理方式和offset()一樣，是當前窗口的相對偏移
3. 使用offset()方法不管該元素如何定位，也不管其父元素如何定位，都是獲取的該元素相對於當前視口的偏移

通常獲取一個元素（A）的位置是爲了讓另外的一個元素（B）正好出現在A元素的附近。通常有2種情況：

1.要顯示的元素B存放在DOM的最頂端或者最底端（即其父元素就是body）.這個時候用offset()是最好的。

 

2.若要顯示的元素B存放在元素A的同一父元素下（即B爲A的兄弟節點），這個時候使用position() 是最合適的。