初學者指南：深入了解 jQuery .offset() 方法
更新日期： 2025 年 3 月 9 日
本文為 jQuery 基本介紹系列文，第 12 篇：
- 如何使用jQuery CDN 建立互動網頁
- 初學者指南：掌握 jQuery DOM 操作技巧
- 初學者指南：深入了解 jQuery 選擇器
- 使用jQuery 刪除第一個子元素的實作教學
- 初學者指南：深入了解 jQuery 事件處理
- 如何在jQuery 中使用事件監聽器addEventListener
- 了解jQuery 中$().each(function(){}) 與$.each() 的差異
- jQuery 與fetch 的非同步請求方法介紹
- 初學者指南：掌握 jQuery 動畫效果
- 初學者指南：深入了解 jQuery 中的 this 關鍵字
- 初學者指南：深入了解 jQuery .offset() 方法 👈進度
在做網頁時，有時我們需要知道畫面上某個元素的位置，像是製作動畫效果，或是讓版面排列得更精確。
jQuery 提供了很多方法，可以幫我們取得元素的位置和大小，其中 .offset() 是一個很實用的工具。
讓我們可以輕鬆地拿到元素相對於 整個頁面 的位置，甚至直接設定它的位置。
本篇文章將詳細介紹 jQuery .offset() 方法的用法，包括如何獲取和設定元素位置，以及該方法返回的數據格式。
此外，本文還將比較 .offset() 與 .position() 的區別，幫助你在不同的開發場景中選擇最合適的方法。
什麼是 .offset() 方法？
jQuery 的 .offset() 方法允許我們，獲取或設置元素相對於 整個頁面 (Document) 的位置，位置值以 像素 (px) 表示。
- 語法:
// 獲取元素的偏移量 (不帶參數)
var position = $(選擇器).offset();
// 設定元素的偏移量 (帶參數)
$(選擇器).offset({ top: Y, left: X });
- 適用場景:
- 獲取元素相對於頁面頂部和左側的距離 (滾動視窗不影響結果)。
- 動態調整元素位置，例如製作拖拽效果、懸浮視窗等。
偏移量是什麼？
當我們說到「偏移量 (Offset)」，其實可以簡單理解為「某個元素在頁面中的位置」。
具體來說，就是這個元素與頁面左上角 (也就是 (0,0) 點) 之間的距離。
- 垂直方向 (top)：從頁面最上方到元素頂部的距離。
- 水平方向 (left)：從頁面最左側到元素左邊緣的距離。
例如，如果一個元素的偏移量是 { top: 100, left: 200 }，這代表這個元素距離頁面頂部 100 像素 (px)，距離頁面左側 200 像素。
想像一下：
- 如果頁面是一張地圖，頁面左上角是
(0,0)的原點，偏移量就像是標示地點的經緯度。 - 移動元素到特定位置，就像告訴這個元素「去地圖上的這個座標站好」。
偏移量特別有用的場景包括：
- 彈出視窗 (Popup) 需要顯示在按鈕旁邊。
- 製作拖曳 (Drag-and-Drop) 效果時，需要實時獲取元素位置。
- 計算不同元素之間的距離，讓動態效果更精準。
.offset() 的返回值：CSS 物件
當我們使用 .offset() 來獲取元素的位置時，它會返回一個 物件 (Object)，該物件包含兩個屬性：
top：元素頂部到文件頂部的距離。left：元素左側到文件左側的距離。
範例:
<div id="box" style="width:100px; height:100px; background-color:red; margin-top:50px;"></div>
<button id="getOffset">獲取位置</button>
<script>
$("#getOffset").click(function() {
var offset = $("#box").offset();
console.log(offset); // 輸出 {top: 50, left: 0} (假設頁面無滾動)
alert("元素位置 - 上：" + offset.top + "px, 左：" + offset.left + "px");
});
</script>
輸出結果:
{top: 50, left: 0}如何使用 .offset() 來獲取元素位置
基本用法
var position = $("#element").offset();
console.log("上：" + position.top + "px, 左：" + position.left + "px");與滾動條 (Scroll) 的影響
.offset() 返回的值是元素相對於 整個文檔 (Document) 的位置，因此即使頁面滾動，返回的值不受影響。
<div style="height:1000px;"></div>
<div id="box" style="width:50px; height:50px; background:blue;"></div>
<script>
$(window).scroll(function() {
var offset = $("#box").offset();
console.log("滾動後位置 - 上：" + offset.top + "px, 左：" + offset.left + "px");
});
</script>
無論滾動多少，.offset() 依然返回元素在整個頁面中的絕對位置。
如何使用 .offset() 設定元素位置
動態設定元素位置
<div id="movable" style="width:50px; height:50px; background:green; position:absolute;"></div>
<button id="moveButton">移動元素</button>
<script>
$("#moveButton").click(function() {
$("#movable").offset({ top: 200, left: 300 });
});
</script>
- 注意: 要使用
.offset()設定位置，元素需要設定position屬性為"absolute"、"relative"或"fixed"。
.offset() 與 .position() 的區別
.offset() 和 .position() 都用於取得元素的位置，但它們有顯著的區別：
| 方法 | 描述 | 應用場景 |
|---|---|---|
| .offset() | 獲取或設置元素相對於 整個文檔 (Document) 的絕對位置，包括滾動條影響。 | 移動元素到頁面特定位置。 |
| .position() | 獲取元素相對於 最近的已定位父元素 (positioned parent) 的偏移量，不受滾動條影響。 | 內部元素相對佈局計算。 |
graph TD
subgraph 瀏覽器窗口
subgraph HTML文檔
subgraph 父元素[父元素 position:relative]
子元素[子元素]
end
end
end
offset[".offset()"] --> offsetDef["返回元素相對於文檔(document)的座標
\- 計算包括 margin/padding
\- 不受父元素影響
\- 返回 {top: Y, left: X}"]
position[".position()"] --> positionDef["返回元素相對於最近的定位祖先元素的座標
\- 計算不包括 margin
\- 受父元素 position 屬性影響
\- 返回 {top: Y, left: X}"]
offsetEx["例: $('#child').offset()
計算相對於整個文檔的位置"] --> offset
positionEx["例: $('#child').position()
計算相對於 position:relative
的父元素的位置"] --> position
case1["案例: 捲動頁面後位置"]
case1 --> offsetChange[".offset() 值會變化因為相對文檔位置改變"]
case1 --> positionSame[".position() 值保持不變因為相對父元素位置不變"]
classDef example fill:#f9f,stroke:#333,stroke-width:2px;
classDef definition fill:#bbf,stroke:#333,stroke-width:2px;
class offsetEx,positionEx example;
class offsetDef,positionDef definition;.position() 的用法
<div id="container" style="position:relative; padding:50px;">
<div id="child" style="position:absolute; top:20px; left:30px; background-color:orange; width:50px; height:50px;"></div>
</div>
<button id="getPosition">獲取位置</button>
<script>
$("#getPosition").click(function() {
var position = $("#child").position();
alert("子元素相對父容器位置 - 上：" + position.top + "px, 左：" + position.left + "px");
});
</script>
.offset() vs .position() 實例對比
<script>
var offset = $("#child").offset();
var position = $("#child").position();
console.log("Offset - 上：" + offset.top + ", 左：" + offset.left);
console.log("Position - 上：" + position.top + ", 左：" + position.left);
</script>
.offset()返回相對於整個頁面的座標 (包括頁面滾動距離)。.position()僅計算相對於最近的已定位父元素 (#container) 的位置，與頁面滾動無關。
實際應用場景
計算元素之間的距離
var box1 = $("#box1").offset();
var box2 = $("#box2").offset();
var distanceX = Math.abs(box1.left - box2.left);
var distanceY = Math.abs(box1.top - box2.top);
console.log("水平距離: " + distanceX + "px, 垂直距離: " + distanceY + "px");
動態定位彈出視窗
$(".button").click(function() {
var position = $(this).offset();
$("#popup").css({
top: position.top + 30,
left: position.left
}).show();
});結語
jQuery 的 .offset() 方法是一個強大的工具，能讓我們輕鬆地獲取和設置元素在頁面中的絕對位置。
它特別適合用於製作動態元素、實現拖放效果、計算元素之間距離等場景。
在選擇使用 .offset() 或 .position() 時，需根據具體需求判斷是要取得元素的 絕對位置 還是 相對父元素的位置。
建議初學者多加練習，將這些方法靈活應用於實際專案中，以提高開發效率並實現更複雜的視覺效果！