jQuery对象函数offsetParent()返回最近的被定位的祖先元素

▥前端 ◶2024-03-27 23:11:03 𝄐 0

jquery官网,jquery和Vue的区别,jquery ui,jquery对象访问的方法,jquery获取radio是否选中,jquery入门教程
jQuery对象函数offsetParent()返回最近的被定位的祖先元素。如果没有被定位的祖先元素，则会返回文档根元素。

当一个元素是相对定位（position: relative）、绝对定位（position: absolute）或固定定位（position: fixed）时，它就成了“被定位的元素”。offsetParent()方法会遍历DOM树向上查找第一个被定位的祖先元素，然后返回该元素的jQuery对象。

以下是一个使用offsetParent()方法的示例。我们可以使用它来获取一个元素相对于其父元素的位置：

html
<!DOCTYPE html>
<html>
<head>
<title>jQuery offsetParent() Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#parent {
position: relative;
padding: 20px;
background-color: lightblue;
}

#child {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>

<script>
$(document).ready(function() {
var parent = $("#child").offsetParent(); // 获取#child的最近被定位的祖先元素
console.log(parent.attr("id")); // 输出 "parent"
});
</script>
</body>
</html>

在这个例子中，我们定义了两个元素：一个父元素(#parent)和一个子元素(#child)。父元素具有相对定位，并设置了padding属性以便更好地显示子元素。

子元素(#child)具有绝对定位，并且它包含在父元素内。我们使用offsetParent()方法获取最近的定位祖先元素(在本例中是父元素 #parent)，并将其存储在变量parent中。然后将其ID输出到控制台。

本文地址： /show-270007.html

${site_name}$

${site_name}$

jQuery对象函数offsetParent()返回最近的被定位的祖先元素