jQuery獲得元素的坐標

使用 jQuery 獲取元素坐標的方法

jQuery 提供了多種方法來獲取元素的坐標信息。

1. .position() 方法: 獲取元素相對於其偏移父元素的坐標。偏移父元素是指最近的具有非 static 定位方式的祖先元素。

<code class="language-javascript">var pos = $('#wrapper').position();
console.dir(pos);
// 输出：left: 0, top: 20</code>

2. .offset() 方法: 獲取元素相對於文檔的坐標。

<code class="language-javascript">var offset = $('#wrapper').offset();
console.dir(offset);
// 输出：left: 70, top: 40</code>

3. 直接獲取坐標: 結合 .offset() 方法直接提取 left 和 top 屬性。

<code class="language-javascript">var elem = $("#wrapper");
var x = elem.offset().left;
var y = elem.offset().top;
console.log('x: ' + x + ' y: ' + y);
// 输出：x: 70 y: 40</code>

4. 自定義 getCoord() 函數: 封裝一個自定義函數，使代碼更簡潔易讀。

<code class="language-javascript">jQuery.fn.getCoord = function() {
  var elem = $(this);
  var x = elem.offset().left;
  var y = elem.offset().top;
  console.log('x: ' + x + ' y: ' + y);
  // 输出：x: 70 y: 40
  return {
    "x": x,
    "y": y
  };
};

$('#wrapper').getCoord();
// 输出：Object { x: 70, y: 40 }</code>

注意: getCoord() 函數並不高效，因為它會中斷 jQuery 鍊式操作。

jQuery 坐標和元素的常見問題 (FAQ)

Q1: 如何使用 jQuery 獲取元素相對於文檔的坐標？

使用 .offset() 方法。該方法返回一個對象，包含 top 和 left 屬性，分別表示元素相對於文檔的垂直和水平位置（像素）。

<code class="language-javascript">var position = $("#element").offset();
console.log("元素位于: " + position.left + ", " + position.top);</code>

Q2: jQuery 中 .position() 和 .offset() 方法的區別是什麼？

.position() 返回元素相對於其偏移父元素的坐標；.offset() 返回元素相對於文檔的坐標。

Q3: 如何使用 jQuery 設置元素的坐標？

使用 .offset() 方法結合一個包含 top 和 left 屬性的對象。

<code class="language-javascript">$("#element").offset({ top: 100, left: 200 });</code>

Q4: 如何使用 jQuery 獲取元素的絕對坐標？

使用 .offset() 方法即可獲取元素的絕對坐標（相對於文檔）。

Q5: 如何使用 jQuery 獲取元素相對於其父元素的坐標？

使用 .position() 方法。

以上是jQuery獲得元素的坐標的詳細內容。更多資訊請關注PHP中文網其他相關文章！