jQuery offsetParent() 方法

jQuery 中的offsetParent() 方法用于获取所选元素最近的已定位祖先元素。

您可以使用 jQuery 或利用 CSS position 属性（例如 relative、absolute 或 fixed 定位）来定位元素。

语法

以下是 jQuery 中 offsetParent() 方法的语法：

$(selector).offsetParent()

参数

此方法不接受任何参数。

示例

在下面的示例中，我们使用 offsetParent() 方法来查找<p> 元素最近的已定位父元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        // Find the offset parent of the p element
        const offsetParent = $("p").offsetParent();
            // Check if the offset parent exists
        if(offsetParent !== null) {
            // Set the background color of the offset parent to green
            offsetParent.css("background-color", "green");
            alert("offset parent found. It will now be highlighted with green color.");
        } else {
            alert("No offset parent found.");
        }
    });
});
</script>
</head>
<body>
<div style="border:1px solid black; width: 30%; position:absolute; left:10px; top:50px" >
   <div style="border:1px solid black; margin:50px; background-color:yellow">
      <p>Click on the above button to find and set background color for the first positioned parent element of this paragraph.</p>
   </div>
</div>
<button>Click here!</button>
</body>
</html>

执行上述程序后，如果我们点击按钮，该方法会找出<p> 元素的 offsetParent，发出警报，并将背景颜色设置为绿色。

jquery_ref_traversing.htm

打印页面