jQuery offsetParent()

admin發表於2017-02-15
jQuery
此方法可以返回匹配元素所有祖先元素中第一個採用定位的祖先元素。

採用定位的父元素就是position:relative或者position:absolute(fixed)元素。

僅對可見元素有效。

jQuery1.2.6版本新增。

[JavaScript] 純文字檢視 複製程式碼
.offsetParent()

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!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://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#bt").click(function () {
    $(".children").offsetParent().css("backgroundColor","yellow"); 
  }) 
}) 
</script> 
</head> 
<body>
<div class="grandfather"> 
<div class="father"> 
  <div class="children"></div> 
</div> 
</div>
<input type="button" id="bt" value="檢視演示"/>
</body> 
</html>

將children元素中所有祖先元素中，第一個採用定位的祖先元素的背景顏色設定為紅色。

相關文章