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

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> Jquery中的offset()和position()深入剖析

編輯：JQuery特效代碼

先看看這兩個方法的定義。
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
};

點擊下面的頁面可以測試一下兩個的區別：

<!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.poluoluo.com/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 class="parent" style="float:right"> 
父容器的position是默認值，也就是static,子容器的position為默認值，也是static,這個時候，offset和position值相同<br><br><br> 
<div class="child"></div> 
</div> 
<div style="clear:both"></div> 
<br> 
<div class="parent" style="position:relative"> 
父容器的position是相對定位，也就是ralative,子容器的position為默認值，也是static,這個時候，offset和position值不同 
<div class="child"></div> 
</div> 
<br> 
<div style="position:absolute;padding:15px;border:3px solid #ff0000;"> 
<div class="parent"> 
父容器的position是絕對定位，也就是absolute,子容器的position為默認值，也是static,這個時候，offset和position值不同 
<div class="child"></div> 
</div> 
</div> 
<div class="copyright"><a href="http://www.playgoogle.com">©playgoogle.com</a></div> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
通過test1頁面測試的結果可以得出這個結論：
使用position()方法時事實上是把該元素當絕對定位來處理，獲取的是該元素相當於最近的一個擁有絕對或者相對定位的父元素的偏移位置。
使用position()方法時如果其所有的父元素都為默認定位（static）方式，則其處理方式和offset()一樣，是當前窗口的相對偏移
使用offset()方法不管該元素如何定位，也不管其父元素如何定位，都是獲取的該元素相對於當前視口的偏移
知道了這些特點，我們應該如何來合理的使用position()和offset()呢？
就我個人的經驗，通常獲取一個元素（A）的位置是為了讓另外的一個元素（B）正好出現在A元素的附近。通常有2種情況：
1.要顯示的元素B存放在DOM的最頂端或者最底端（即其父元素就是body）.這個時候用offset()是最好的。示例驗證：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
用position無法正常顯示的例子

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
在以上兩個例子中，元素B都存放在Dom 結構的最下面，由於其父元素就是BODY，所以，不管元素A如何定位，只要找的A相當與整個窗口的偏移位置，就可以解決問題。

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

<!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.poluoluo.com/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; 
} 
input{ 
height:25px; 
float:right; 
} 
.copyright{ 
position:absolute; 
right:0; 
} 
.tip{ 
border:3px dotted #669900; 
background:#eee; 
width:200px; 
position:absolute; 
display:none; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("input").bind("click",function(){ 
$(".tip").css({ 
left:$(this).position().left+"px", 
top:$(this).position().top+25+"px" 
}); 
$(".tip").toggle(); 
}); 
}); 
</script> 
</head> 
<body> 
用position, 該例中元素B在button按鈕的附近，也就是，元素B和button按鈕有共同的父容器 
<div class="parent" style="position:absolute;left:150px"> 
父元素是絕對定位的 
<input type="button" value="點擊我，正好在我的下面顯示元素B，且左邊和我對齊"> 
<div class="tip"> 
我是元素B<br> 
現在用的是position， 
我和按鈕的父親元素相同<br> 
我能按要求正常顯示 
</div> 
</div> 
<br><br><br><br><br><br><br><br> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
用offset五法正常顯示的例子

<!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.poluoluo.com/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; 
} 
input{ 
height:25px; 
float:right; 
} 
.copyright{ 
position:absolute; 
right:0; 
} 
.tip{ 
border:3px dotted #669900; 
background:#eee; 
width:200px; 
position:absolute; 
display:none; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("input").bind("click",function(){ 
$(".tip").css({ 
left:$(this).offset().left+"px", 
top:$(this).offset().top+25+"px" 
}); 
$(".tip").toggle(); 
}); 
}); 
</script> 
</head> 
<body> 
用offset, 該例中元素B在button按鈕的附近，也就是，元素B和button按鈕有共同的父容器 
<div class="parent" style="position:absolute;left:150px"> 
父元素是絕對定位的 
<input type="button" value="點擊我，正好在我的下面顯示元素B，且左邊和我對齊"> 
<div class="tip"> 
我是元素B<br> 
現在用的是offset， 
我和按鈕的父親元素相同 
我無法按要求正常顯示 
</div> 
</div> 
<br><br><br><br><br><br><br><br> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
綜上所述，應該使用position()還是offset()取決於你被控制的元素B DOM所在的位置。

上一頁:基於Jquery好友選擇器V2.0插件
下一頁:Jquery 基礎學習筆記之文檔處理

JQuery特效代碼

jquery處理json對象: 在服務器端的php腳本：代碼如下:<?php $data[i
40個有創意的jQuery圖片和內容滑動及彈出插件收藏集之三: 相信大家都知道jQuery是最優秀的Javascript框架之一。以其語法簡單靈活而大受Web de
很棒的學習jQuery的12個網站推薦: 1. jquery-mix.com2. jqueryfordesigners.com3. 15day

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章