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中文网其他相关文章！