博客

jQuery中position()和offset()的区别是什么

  • Post category:jquery

jQuery中的position（）和offset（）方法都用于获取元素的位置信息。它们可以用于诸如计算当前元素的偏移量、获取相对于其他元素的位置以及设置新的位置等方面，但二者还是有一定的区别的。

  • position()方法：获取一个元素相对其父元素的位置。它返回一个对象，该对象包含元素的上、下、左、右属性。如果元素没有父元素，则position（）的结果将数据是相对于文档的。

  • offset()方法：获取一个元素相对于文档的位置。它返回一个对象，该对象包含元素的上、下、左、右属性。它与position（）方法的区别在于，它不是相对于父元素的位置，而是相对于文档。

举个例子：

<body>
<div class="container">
    <div id="child"></div>
</div>
</body>

.container{
  position: relative;
}
#child{
  position:absolute;
  top: 20px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: #000;
}

对于这个 HTML 代码和 CSS 样式，我们想要获取 #child 元素与 body 之间的距离。

使用position()方法：

console.log($("#child").position().top);  // 20
console.log($("#child").position().left); // 30

使用offset()方法：

console.log($("#child").offset().top);   // 20
console.log($("#child").offset().left);  // 30

可以看到，在这种情况下，position()方法和offset()方法返回相同的结果。

再来一个例子，如果我们想要设置 #child 元素相对于 .container 元素的偏移。

使用position()方法：

$("#child").css({
    "position": "absolute",
    "top": $("#container").position().top + 20,
    "left": $("#container").position().left + 50
});

使用offset()方法：

$("#child").css({
    "position": "absolute",
    "top": $("#container").offset().top + 20,
    "left": $("#container").offset().left + 50
});

可以看到，在这种情况下，position()方法和offset()方法返回不同的结果。因为position()方法获取了元素相对其父元素的位置，而offset()方法获取了元素相对于文档的位置。所以，当我们设置元素的位置时，需要根据实际场景使用合适的方法来获取正确的位置信息。

Tags: