jQueryoffsetParent()方法

12/6/2015来源:Javascript教程人气:893

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

$(selector).offsetParent()

代码实例:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.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 src="http://libs.baidu.com/jquery/1.9.0/jquery.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>

以上代码可以将children元素中所有祖先元素中,第一个采用定位的祖先元素的背景颜色设置为红色。

原文地址如下:jQuery offsetParent()方法一章节。