element.offsetParentプロパティ

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>

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>

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>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, プロパティ, リファレンス, 参照, 逆引き パーマリンク