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

更新時間：2009年05月31日 00:38:41 作者：

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

先看看這兩個方法的定義。
offset():
獲取匹配元素在當(dāng)前視口的相對偏移。
返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。
position():
獲取匹配元素相對父元素的偏移。
返回的對象包含兩個整形屬性：top 和 left。為精確計(jì)算結(jié)果，請?jiān)谘a(bǔ)白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。
真的就這么簡單嗎？實(shí)踐出真知。
先來看看在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 
}; 

點(diǎn)擊下面的頁面可以測試一下兩個的區(qū)別：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>offset和position測試1</title> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.js"></script> <style type="text/css"> body{margin:15px;width:960px;} .parent{ border:3px solid #ccc; width:600px; height:300px; margin-left:55px; padding:25px; } .child{ background:#666; width:200px; height:200px; color:#fff; } .copyright{ position:absolute; right:0; } </style> <script type="text/javascript"> $(document).ready(function(){ $(".child").each(function(){ var text = "position().left="+$(this).position().left; text +="<br>position().top="+$(this).position().top; text +="<br>offset().left="+$(this).offset().left; text +="<br>offset().top="+$(this).offset().top; text +="<br>其parent的offset().top="+$(this).parents(".parent").offset().top; text +="<br>其parent的offset().left="+$(this).parents(".parent").offset().left; $(this).html(text); }); }); </script> </head> <body> <div   id="xm2sjgd"   class="parent" style="float:right"> 父容器的position是默認(rèn)值，也就是static,子容器的position為默認(rèn)值，也是static,這個時候，offset和position值相同<br><br><br> <div   id="w7dkbeu"   class="child"></div> </div> <div style="clear:both"></div> <br> <div   id="dobiabm"   class="parent" style="position:relative"> 父容器的position是相對定位，也就是ralative,子容器的position為默認(rèn)值，也是static,這個時候，offset和position值不同 <div   id="thjbxkr"   class="child"></div> </div> <br> <div style="position:absolute;padding:15px;border:3px solid #ff0000;"> <div   id="n2dpbel"   class="parent"> 父容器的position是絕對定位，也就是absolute,子容器的position為默認(rèn)值，也是static,這個時候，offset和position值不同 <div   id="axjlsoa"   class="child"></div> </div> </div> <div   id="77w2ikc"   class="copyright"><a href="http://www.playgoogle.com">&copy;playgoogle.com</a></div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

通過test1頁面測試的結(jié)果可以得出這個結(jié)論：
使用position()方法時事實(shí)上是把該元素當(dāng)絕對定位來處理，獲取的是該元素相當(dāng)于最近的一個擁有絕對或者相對定位的父元素的偏移位置。
使用position()方法時如果其所有的父元素都為默認(rèn)定位（static）方式，則其處理方式和offset()一樣，是當(dāng)前窗口的相對偏移
使用offset()方法不管該元素如何定位，也不管其父元素如何定位，都是獲取的該元素相對于當(dāng)前視口的偏移
知道了這些特點(diǎn)，我們應(yīng)該如何來合理的使用position()和offset()呢？
就我個人的經(jīng)驗(yàn)，通常獲取一個元素（A）的位置是為了讓另外的一個元素（B）正好出現(xiàn)在A元素的附近。通常有2種情況：
1.要顯示的元素B存放在DOM的最頂端或者最底端（即其父元素就是body）.這個時候用offset()是最好的。示例驗(yàn)證：

[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é)點(diǎn)），這個時候使用position() 是最合適的。
用offset 正常顯示的例子

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

用offset五法正常顯示的例子

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

綜上所述，應(yīng)該使用position()還是offset()取決于你被控制的元素B DOM所在的位置。

您可能感興趣的文章: