1.offsetLeft/offsetTop

在頁面任一元素的offsetLeft總是找到離其最近的已經定位的父元素或祖先元素定位，如果沒有，就根據根節點body定位，然後獲取其left值。

2.offset().left/offset().top

返回或設定匹配元素相對於文件的偏移（位置）。 無論元素的父元素或祖先元素的position屬性是什麼，總是計算相對於文件的位置。

示例：

#parent{width: 300px;height: 100px;margin: 0 auto;border: 1px solid #ccc;position: relative;}

• 1

• 1

<div id="parent"
 
>
    <p id="child">測試offsetLeft與offset().left的區別</p>
</div>

• 1
• 2
• 3

• 1
• 2
• 3

var left = document.getElementById('child').offsetLeft;
var left1 = $('#child').offset().left;
console.log(left);//結果始終是0
console.log(left1);//結果是相對於文件的偏移

========================================================

offset()

該函式返回一個座標物件(Object)，該物件有一個left屬性和top屬性。屬性值均為數字，它們都以畫素(px)為單位。

與position()不同的是：offset()返回的是相對於當前文件的座標，position()返回的是相對於其定位的祖輩元素的座標。

該函式屬於jQuery物件(例項)。

語法

jQuery 1.2 新增該函式。

jQueryObject.offset([ coordinates ])

注意：
1、如果省略了coordinates引數，則表示獲取偏移位置；如果指定了該引數，則表示設定偏移位置。2、offset()

引數

jQuery 1.4 新增支援：offset()支援通過傳入coordinates引數來設定匹配元素的座標。

在1.4之前，offset()只用於獲取第一個匹配元素的座標。從1.4開始，offset()還可用於設定所有匹配元素的座標。引數coordinates即表示需要設定的座標值。

引數coordinates應該是一個具備left和top屬性的物件。

引數coordinates還可以是函式，則offset()將根據匹配的所有元素遍歷執行該函式，函式中的this將指向對應的DOM元素。

offset()還會為函式傳入兩個引數：第一個引數就是當前元素在匹配元素中的索引，第二個引數就是該元素當前的座標物件。函式的返回值就是需要設定的座標物件。

返回值

offset()函式的返回值為Object型別，返回值的型別取決於offset()函式當前執行的是"設定"操作還是"讀取"操作。

如果offset()函式執行的是"設定"操作，則返回當前jQuery物件本身；如果是"讀取"操作，則返回第一個匹配元素相對於當前文件的座標物件。

如果當前jQuery物件匹配多個元素，返回座標時，offset()函式只以其中第一個匹配的元素為準。如果沒有匹配的元素，則返回undefined。

offset()中的座標參考系是以當前文件的左上角為原點(0,0)，向右為正，向下為正。

示例&說明

以下面這段HTML程式碼為例：

<br><br><pid="n1">CodePlayer</p><pid="n2"class="meta"left="20"top="50">專注於程式設計開發技術分享</p><pid="n3"class="meta"left="20"top="100">http://www.365mini.com</p>

以下jQuery示例程式碼用於演示offset()函式的具體用法：

var $n1 = $("#n1");// 輸出n1的當前座標var coord = $n1.offset();
alert("當前座標：("+ coord.left +", "+ coord.top +")");// 當前座標：(8, 60)// 設定n1的座標為(0, 0)var offset = $n1.offset({top:0, left:0});var $meta_p = $("p.meta");// 將所有帶類名meta的p元素相對當前位置進行left和top屬性指定的偏移。
$meta_p.offset(function(index, coord){var $me = $(this);var left = $me.attr("left"), top = $me.attr("top");
    left = isNaN( left )?0: parseInt(left,10);
    top = isNaN( top )?0: parseInt(top,10);return{"left": coord.left + left,"top": coord.top + top  };});

執行程式碼

上述程式碼執行後的完整html程式碼如下(格式未作任何調整)：

<br><br><pid="n1"style="position: relative; top:-60px; left:-8px;">CodePlayer</p><pid="n2"class="meta"left="20"top="50"style="position: relative; top:50px; left:20px;">專注於程式設計開發技術分享</p><pid="n3"class="meta"left="20"top="100"style="position: relative; top:100px; left:20px;">http://www.365mini.com</p></body>