jquery position()函式和offset()函式的區別

admin發表於2017-03-19
jQuery函式

本章節介紹一下這兩個函式的基本用法和區別，希望能夠給需要的朋友帶來一定的幫助。

一.position()函式:

此函式可以返回當前元素距離最近定位父元素的偏移量，如果父元素中沒有定位元素，那麼就返回相對於文件的偏移量。

它會返回一個物件，此物件具有left和top屬性，能夠分別返回左和上偏移量。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  margin:100px;
  height:1000px;
}
#thediv{
  width:150px;
  height:50px;
  background:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function(){
    $("#thediv").html($("#thediv").position().left);
  })
})
</script>
<body>
<div id="thediv"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

由於div元素的父元素中沒有定位元素，所以此函式返回的是相對於文件的偏移量。

二.offset()函式:

此函式和postion()函式有所區別，它始終返回元素相對於文件的偏移量。

它會返回一個物件，此物件具有left和top屬性，能夠分別返回左和上偏移量。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  margin:100px;
  height:1000px;
}
#thediv{
  width:150px;
  height:50px;
  background:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function(){
    $("#thediv").html($("#thediv").offset().left);
  })
})
</script>
<body>
<div id="thediv"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼可以返回div元素相對於文件的偏移量。

三.兩者的區別:

區別其實在上面兩個函式的介紹中已經比較清楚了，下面再來做一下簡單的總結。

1.相同點是兩者的返回值都是一個物件，此物件包含top和left兩個屬性，分別能夠返回頂部和左部的偏移量。

2.不同點是position()函式首先要看當前元素是否具有定位父元素，如果有則返回的是相對它最近的定位父元素的偏移量，如果沒有，則返回相對於文件的偏移量，而offset()函式則始終返回相對於文件的偏移量。

相關文章