Element.offsetParent - オフセット座標の基準となる要素を取得する

投稿日: / 更新日:

JavaScriptの、ElementオブジェクトのoffsetParentは、オフセット座標の基準となる要素を取得するプロパティです。

説明

ElementオブジェクトのoffsetParentプロパティは、オフセット座標の基準となる要素を含みます。具体的にはoffsetLeft、offsetTopプロパティの基準となる要素です。

<div id="parent">
	<div id="target"></div>
</div>

さて、offsetParentとは親要素のことではありません。例えば上記を見て下さい。id="target"のoffsetParentがid="parent"である、とは限らないわけです。ある条件によって、offsetParentか否かが決まります。

結論から言うと、offsetParentになる条件はスタイルシートでposition:relative、position:absolute、position:fixedのいずれかが指定された要素です。テキストで説明するなら「動的に位置が調整される要素」ということになります。整理しましょう。offsetParentとは、「直近の、動的に位置が調整される自分を囲う要素」です。

<div id="parent-1">
	<div id="parent-2">
		<div id="parent-3">
			<div id="parent-4">
				<div id="target"></div>
			</div>
		</div>
	</div>
</div>

例えば、id="parent-2"にposition:relative、position:absolute、position:fixedのいずれかが指定されている場合、id="target"のoffsetParentはid="parent-2"ということになります。もちろん、id="parent-3"、id="parent-4"のoffsetParentも同様にid="parent-2"ということになります。

例外も覚えておいて下さい。table要素内にある場合は、自分を囲う直近のtd要素、th要素、またはtable要素がoffsetParentとなります。また、自分を囲う要素の中に「動的に位置が調整できる要素」がない場合、body要素がoffsetParentとなります。

サンプルコード

<div class="parent">
	<div id="target">目的の要素</div>
</div>
.parent {
	position: relative ;
}
// div要素を取得
var divElement = document.getElementById( "target" ) ;

// offsetParentを取得 ( → <div class="parent"> ... </div> )
var offsetParent = divElement.offsetParent ;

デモ

id属性がtargetのdiv要素の、offsetParentを取得して表示します。コンソールでオブジェクトの中身を確認できます。

構文

readonly Element offsetParent = Element.offsetParent

返り値

項目説明
offsetParentオフセット座標の基準となる要素。直近で、動的に位置を調整できる自分を囲う要素。table要素内の場合は、直近のtable要素、th要素、td要素。該当する要素がない場合はbody要素。

関連項目