jQuery | offsetParent() 与示例

简介

offsetParent() 是 jQuery 中的一个方法，用于获取元素的 offsetParent 元素。offsetParent 元素是指该元素的定位父级，即该元素最近的已定位元素。

语法

$(selector).offsetParent()

返回值

offsetParent() 方法返回一个 jQuery 对象，其中包含该元素的 offsetParent 元素。

示例

HTML 代码

<div id="parent" style="position:relative;">
  <div id="child" style="position:absolute; top:50px; left:50px;">child</div>
</div>

JavaScript 代码

var parentOffset = $('#child').offsetParent().offset();
console.log(parentOffset.top);
console.log(parentOffset.left);

解释

该示例中有一个父级元素和一个子元素，父级元素的位置是相对定位的，子元素的位置是绝对定位的。offsetParent() 方法用于获取子元素所在的 offsetParent 元素，即父级元素。然后使用 offset() 方法获取该父级元素的位置，最后在控制台中打印出该位置的 top 值和 left 值。

输出结果为：

50
0

由此可见，父级元素的位置的 left 值是 0，这是因为父级元素的位置是相对于浏览器窗口而言的，而非相对于其它元素。因此，它的 offsetParent 元素是 null，使用 offset() 方法获取到的位置是相对于浏览器窗口的而非相对于其它元素的。