jQuery中offsetParent()方法用法实例

251 阅读 0 评论 166 点赞

我是靠谱客的博主重要信封，最近开发中收集的这篇文章主要介绍jQuery中offsetParent()方法用法实例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例讲述了jQuery中offsetParent()方法用法。分享给大家供大家参考。具体分析如下：

此方法可以返回匹配元素所有祖先元素中第一个采用定位的祖先元素。
所谓采用定位的父元素就是施加position:relative或者position:absolute(fixed)的元素。
此方法仅对可见元素有效。

语法结构:

复制代码代码如下:

$(selector).offsetParent()

代码实例:

复制代码代码如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="http://www.uoften.com/" /> 

<title>offsetParent()函数-脚本之家</title> 

<style type="text/css"> 

.grandfather

{

  width:200px;

  height:200px;

  background-color:red;

  position:relative;

}

.father

{

  width:150px;

  height:150px;

  background-color:blue;

}

.children

{

  width:50px;

  height:50px;

  background-color:green;

}

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){

    $(".children").offsetParent().css("backgroundColor","yellow"); 

  }) 

}) 

</script> 

</head> 

<body>

<div class="grandfather"> 

<div class="father"> 

  <div class="children"></div> 

</div> 

</div>

<button>查看效果</button> 

</body> 

</html>