📌  相关文章
📜  jQuery中的offset和position有什么区别

📅  最后修改于: 2020-11-27 01:24:45             🧑  作者: Mango

jQuery中的offset和position有什么区别?

jQuery offset()方法和jQuery position()方法本质上相似。这两种方法都可以应用于可见元素，并且都返回包含整数坐标属性top和left的对象。

尽管这两种方法都有一些相似之处，但是jQuery offset()方法与jQuery position()方法不同。 offset()方法检索相对于文档的当前位置，而position()方法检索相对于父元素的元素的当前位置。

在讨论差异之前，让我们首先讨论两种jQuery方法。

jQuery offset()方法

jQuery offset()方法用于获取第一个匹配元素相对于文档的当前偏移量。它通常用于拖放功能。 offset()方法提供两种方法：设置或返回所选元素相对于文档的偏移坐标。

返回偏移量：使用此方法返回偏移量时，它将返回FIRST匹配元素的偏移量坐标。

设置偏移量：使用此方法设置偏移量时，它将设置所有匹配元素的偏移量坐标。

jQuery position()方法

jQuery position()方法允许我们检索元素相对于父元素的当前位置。它返回第一个匹配元素的位置。此方法返回具有两个属性的对象：顶部和左侧位置(以像素为单位)。

当我们必须将一个新元素放置在包含DOM元素的同一个元素附近时，position()方法更有用。

jQuery offset()v / s jQuery position()

offset() method position() method
It is relative to the document. It is relative to the parent.
This method is recommended to use when we have to position a new element on top of an already existing element. It should be used when we have to position a new element near another one.
It returns the current position of an element relative to the document. It returns the current position relative to the parent.

现在，让我们看一个同时使用position()方法和offset()方法的示例。

例

在此示例中，我们将position()和offset()方法应用于给定的h2元素，以查找其位置和偏移量。有两个名为“位置”和“偏移”的按钮，它们分别返回h2元素的顶部和左侧坐标值。

position()方法提供相对于父级的坐标，而offset()方法提供相对于文档的坐标。

  
  
  

  
  
  

 Welcome to the javaTpoint.com 
  

 Click the following buttons to get the position and offset of the above heading.

输出量

执行完上述代码后，输出将为-

点击“位置”按钮后，输出将为-

单击偏移按钮后，输出将为-