博客

如何使用jQuery获得一个元素相对于文档或父级的位置

  • Post category:jquery

要使用 jQuery 获得一个元素相对于文档或父级的位置，可以使用 .offset() 和 .position() 方法。这两个方法都返回一个包含 top 和 left 值的对象，表示元素在文档中的绝对位置。两者的主要区别在于它们计算位置的基准点不同。下面是详细的攻略：

使用 offset() 方法

.offset() 方法返回相对于文档的偏移量，它的计算基准点是文档的左上角，可以这样使用：

// 获取元素在文档中的位置
var $elem = $('.my-element');
var offset = $elem.offset();
console.log(offset.top, offset.left);

以上代码将获取到名为 my-element 的元素的 top 和 left 值。这里使用了 $() 函数来获取元素的 jQuery 对象，然后调用 .offset() 方法来获取位置信息，最后使用 console.log() 方法打印结果。

使用 position() 方法

.position() 方法返回相对于父元素的偏移量，它的计算基准点是父元素的左上角，可以这样使用：

// 获取元素在父元素中的位置
var $elem = $('.my-element');
var position = $elem.position();
console.log(position.top, position.left);

以上代码将获取到名为 my-element 的元素在它的父元素中的 top 和 left 值。同样，这里也使用了 $() 函数来获取元素的 jQuery 对象，然后调用 .position() 方法来获取位置信息，最后使用 console.log() 方法打印结果。

示例说明

以下是两个示例，演示如何使用 .offset() 和 .position() 方法获取元素位置：

示例1

HTML 代码：

<div class="container">
  <div class="my-element">Hello, world!</div>
</div>

CSS 代码：

.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.my-element {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: pink;
}

JavaScript 代码：

var $elem = $('.my-element');
var offset = $elem.offset();
var position = $elem.position();

console.log('offset:', offset.top, offset.left);
console.log('position:', position.top, position.left);

输出结果：

offset: 51 51
position: 50 50

以上示例中，元素 .my-element 的父元素 .container 是相对定位的，而 .my-element 本身是绝对定位的。.my-element 的位置是相对于 .container 的左上角定位的。

示例2

HTML 代码：

<div class="my-element">Hello, world!</div>

CSS 代码：

.my-element {
  width: 100px;
  height: 100px;
  background-color: pink;
  margin: 50px;
  padding: 30px;
  border: 1px solid black;
  box-sizing: border-box;
}

JavaScript 代码：

var $elem = $('.my-element');
var offset = $elem.offset();
var position = $elem.position();

console.log('offset:', offset.top, offset.left);
console.log('position:', position.top, position.left);

输出结果：

offset: 81 81
position: 0 0

以上示例中，元素 .my-element 没有父元素，它是相对于文档定位的，.my-element 的外边距为50px，内边距为30px，而且有一个1px的边框，这些都会影响其位置的计算。而使用 .position() 方法时，由于没有父元素，它的结果永远是 (0, 0)。

Tags: