element.offsetParentは、「element」に指定した要素の位置から最も近く、CSSのposition属性がrelative、absolute、fixedの何れかである、祖先要素を参照するプロパティ。
構文
var $offsetParent = $elementNodeReference.offsetParent;
戻り値
指定した要素の位置から最も近く、CSSのposition属性がrelative、absolute、fixedの何れかである、祖先要素への参照。
サンプル
position属性がrelative、absolute、fixedの何れかである
最も近い祖先要素の背景色：■
サンプルの動作について
黄色のボックス要素をクリックすると、position属性がrelativeで、黄色のボックス要素から最も近い祖先要素であるのは、緑色のボックス要素なので、「最も近い祖先要素の背景色：」の右側の「■」を緑色にする。
紫色のボックス要素をクリックすると、position属性がrelativeで、紫色のボックス要素から最も近い祖先要素であるのは、青色のボックス要素なので、「最も近い祖先要素の背景色：」の右側の「■」を青色にする。
サンプルのソースコード
JavaScript
<script>
window.onload = function () {
document.getElementById( "sample-div-yellow" ).onclick = offsetParentA;
document.getElementById( "sample-div-purple" ).onclick = offsetParentB;
}
function offsetParentA() {
var $elementNodeReference = document.getElementById( "sample-div-yellow" );
var $offsetParentBackgroundColor = $elementNodeReference.offsetParent.style.backgroundColor;
document.getElementById( "sample-message" ).style.color = $offsetParentBackgroundColor;
}
function offsetParentB() {
var $elementNodeReference = document.getElementById( "sample-div-purple" );
var $offsetParentBackgroundColor = $elementNodeReference.offsetParent.style.backgroundColor;
document.getElementById( "sample-message" ).style.color = $offsetParentBackgroundColor;
}
</script>
window.onload = function () {
document.getElementById( "sample-div-yellow" ).onclick = offsetParentA;
document.getElementById( "sample-div-purple" ).onclick = offsetParentB;
}
function offsetParentA() {
var $elementNodeReference = document.getElementById( "sample-div-yellow" );
var $offsetParentBackgroundColor = $elementNodeReference.offsetParent.style.backgroundColor;
document.getElementById( "sample-message" ).style.color = $offsetParentBackgroundColor;
}
function offsetParentB() {
var $elementNodeReference = document.getElementById( "sample-div-purple" );
var $offsetParentBackgroundColor = $elementNodeReference.offsetParent.style.backgroundColor;
document.getElementById( "sample-message" ).style.color = $offsetParentBackgroundColor;
}
</script>
CSS
<style type="text/css">
<!--
#sample {
width: 500px;
height: 230px;
margin: 0px;
padding: 25px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#sample div {
margin: 25px;
border: 1px solid gray;
border-radius: 10px;
}
#sample-div-blue {
width: 400px;
height: 150px;
position: relative;
background-color: blue;
}
#sample-div-blue div {
float: left;
}
#sample-div-green {
width: 130px;
height: 100px;
position: relative;
background-color: green;
}
#sample-div-yellow {
width: 80px;
height: 50px;
background-color: yellow;
cursor: pointer;
}
#sample-div-red {
width: 130px;
height: 100px;
background-color: red;
}
#sample-div-purple {
width: 80px;
height: 50px;
background-color: purple;
cursor: pointer;
}
-->
</style>
<!--
#sample {
width: 500px;
height: 230px;
margin: 0px;
padding: 25px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#sample div {
margin: 25px;
border: 1px solid gray;
border-radius: 10px;
}
#sample-div-blue {
width: 400px;
height: 150px;
position: relative;
background-color: blue;
}
#sample-div-blue div {
float: left;
}
#sample-div-green {
width: 130px;
height: 100px;
position: relative;
background-color: green;
}
#sample-div-yellow {
width: 80px;
height: 50px;
background-color: yellow;
cursor: pointer;
}
#sample-div-red {
width: 130px;
height: 100px;
background-color: red;
}
#sample-div-purple {
width: 80px;
height: 50px;
background-color: purple;
cursor: pointer;
}
-->
</style>
HTML
<div id="sample">
<p>
position属性がrelative、absolute、fixedの何れかである<br />最も近い祖先要素の背景色：<span id="sample-message">■</span>
</p>
<div id="sample-div-blue" style="background-color: blue;">
<div id="sample-div-green" style="background-color: green;">
<div id="sample-div-yellow" style="background-color: yellow;"></div>
</div>
<div id="sample-div-red" style="background-color: red;">
<div id="sample-div-purple" style="background-color: purple;"></div>
</div>
<span style="clear: left;"></span>
</div>
</div>
<p>
position属性がrelative、absolute、fixedの何れかである<br />最も近い祖先要素の背景色：<span id="sample-message">■</span>
</p>
<div id="sample-div-blue" style="background-color: blue;">
<div id="sample-div-green" style="background-color: green;">
<div id="sample-div-yellow" style="background-color: yellow;"></div>
</div>
<div id="sample-div-red" style="background-color: red;">
<div id="sample-div-purple" style="background-color: purple;"></div>
</div>
<span style="clear: left;"></span>
</div>
</div>