jQuery offset()和position()用法詳解

admin發表於2017-11-01
jQuery

這兩個方法非常的常用，同時掌握起來有些困難，下面就介紹一下這兩個方法的用法。

下面先看一下它們基本的定義:

1.offset()方法的定義:

此方法獲取或者設定匹配元素在當前document的相對偏移。

此方法只對可見元素有效。 

當獲取偏移量時，方法的返回值是一個包含兩個整型屬性（top和left）的物件。

設定偏移量時，此方法的引數是帶有top和left屬性的物件。

具體用法可以參閱jQuery的offset()方法一章節。

2.position()方法的定義:

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

返回的物件包含兩個整形屬性（top和left）的物件。

為精確計算結果，請在補白、邊框和填充屬性上使用畫素單位。

此方法只對可見元素有效。

具體用法可以參閱jQuery的position()方法一章節。

但是此方法並非只有定義的那麼簡單，在實際應用中，它的返回值也並非只是獲取匹配元素相對父元素的偏移量。

實際上position()方法是將元素以CSS的絕對定位來處理，也就是position屬性值為absolute（當然並不是將元素的的定位方式真的設定為絕對定位），這個時候它的定位參考物件準確的來說應該是距離它最近的一個擁有定位的父元素，和CSS的絕對定位的原則是一樣的，可以參閱position絕對定位一章節。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<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" src="mytest/jQuery/jquery-1.8.3.js"></script>
<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值相同 
  <div class="child"></div> 
</div> 
<div style="clear:both"></div> 
<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> 
</body> 
</html>

最後總結:

1.offset方法獲取的是匹配元素相對於文件的偏移量，和物件本身和父元素的定位方式是無關的。

2.position方法稍稍複雜一些：

（1）.如果祖輩元素中有采用絕對定位或者相對定位者，則此方法獲取的偏移量將以最近的採用定位的的祖輩元素為參考。

（2）.如果祖輩元素中沒有采用絕對定位或者相對定位者，則此方法獲取的偏移量將以視窗為參考物件。

相關文章