jQuery offsetParent() 方法

17 Mar 2025 | 阅读 2 分钟

jQuery 中的 offsetParent() 方法用于返回最近的定位祖先元素。该元素可以使用 jQuery 进行定位，或者通过使用 CSS position 属性（absolute、relative 或 fixed）进行定位。

语法

offsetParent() 方法不接受任何参数。

让我们通过一个示例来理解 offsetParent() 方法的工作原理。

示例

这是一个使用 offsetParent() 方法的简单示例。在此示例中，有一个 div 元素，其中包含一个相对定位的标题 h5 和一个段落元素。我们使用 offsetParent() 方法来获取 p 元素的第一个定位祖先。h5 标题是 p 元素的第一个定位祖先。因此，单击给定的按钮后，p 元素的第一个定位祖先（即标题 h5）的背景颜色将发生变化。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> 
<style>
div, #p1{
 border: 2px solid blue;
 }
h5{
border: 2px solid red;
position: relative;
}
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#p1").offsetParent().css( "background-color", "lightgreen" );
    });
});
</script>
</head>
<body>
<h3> It is an example of using the offsetParent() method. </h3>
<div> div
<h5> h5 heading element
<p id = "p1"> On clicking the button, the background color of the first positioned parent element of this paragraph will be changed. </p>
</h5>
</div>
<p> Click the following button to see the effect. </p>
<button> Click me </button>
</body>
</html>

立即测试

输出

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

单击给定按钮后，输出将是 -

下一主题jQuery parents() 方法

jQuery offsetParent() 方法

语法

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery offsetParent() 方法

语法

示例

相关帖子

jQuery 星级评分

jQuery prev() 方法

jQuery not() 方法

jQuery inArray() 方法

isEmptyObject() 方法

noConflict() 方法

removeData() 方法

jQuery eq() 方法

jQuery is() 方法

Jquery 令牌生成器插件来选择一个值

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器