|
|
先看看這兩個方法的定義。
offset():
獲取匹配元素在當(dāng)前視口的相對偏移。
返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。
position():
獲取匹配元素相對父元素的偏移。
返回的對象包含兩個整形屬性：top 和 left。為精確計算結(jié)果，請在補(bǔ)白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。
真的就這么簡單嗎？實踐出真知。
先來看看在jquery框架源碼里面，是怎么獲得position()的：
復(fù)制代碼 代碼如下:
// 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
};
點擊下面的頁面可以測試一下兩個的區(qū)別：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
通過test1頁面測試的結(jié)果可以得出這個結(jié)論：
使用position()方法時事實上是把該元素當(dāng)絕對定位來處理，獲取的是該元素相當(dāng)于最近的一個擁有絕對或者相對定位的父元素的偏移位置。
使用position()方法時如果其所有的父元素都為默認(rèn)定位（static）方式，則其處理方式和offset()一樣，是當(dāng)前窗口的相對偏移
使用offset()方法不管該元素如何定位，也不管其父元素如何定位，都是獲取的該元素相對于當(dāng)前視口的偏移
知道了這些特點，我們應(yīng)該如何來合理的使用position()和offset()呢？
就我個人的經(jīng)驗，通常獲取一個元素（A）的位置是為了讓另外的一個元素（B）正好出現(xiàn)在A元素的附近。通常有2種情況：
1.要顯示的元素B存放在DOM的最頂端或者最底端（即其父元素就是body）.這個時候用offset()是最好的。示例驗證：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
用position無法正常顯示的例子
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
在以上兩個例子中，元素B都存放在Dom 結(jié)構(gòu)的最下面，由于其父元素就是BODY，所以，不管元素A如何定位，只要找的A相當(dāng)與整個窗口的偏移位置，就可以解決問題。
2.若要顯示的元素B存放在元素A的同一父元素下（即B為A的兄弟節(jié)點），這個時候使用position() 是最合適的。
用offset 正常顯示的例子
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
用offset五法正常顯示的例子
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
綜上所述，應(yīng)該使用position()還是offset()取決于你被控制的元素B DOM所在的位置。
JavaScript技術(shù)：Jquery中的offset()和position()深入剖析，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
