SYNCERのロゴ
アイキャッチ画像

HTMLElement.offsetParent - オフセットの基準となる包含要素

offsetParentは、HTMLElementのプロパティです。オフセットの基準となる包含要素を返します。具体的には、自身から一番近い、スタイルシートのpositionプロパティが"static"ではない祖先要素です。該当する要素がない場合、body要素が返ります。このプロパティは読み取り専用です。

概要

名前
offsetParent
所属
HTMLElement
IDL
readonly attribute Element? offsetParent;
仕様書
https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetparent

説明

該当する包含要素のElement。なければ、HTMLBodyElement。

チュートリアル

HTMLElement.offsetParentは、オフセットの基準となる包含要素を返します。オフセットとは何か。これは、例えばスタイルシートでtopプロパティや、leftプロパティの値を指定する際の、計算の基準となる要素を指します。次の例では、p#hogeのoffsetParentはdiv#fugaです。

HTML

<div id="piyo">
	<div id="fuga">
		<p id="hoge">SYNCER</p>
	</div>
</div>

CSS

div#fuga {
	position: relative ;
}

JavaScript

var element = document.getElementById( "hoge" ) ;
var offsetParentElement = element.offsetParent ;	// <div id="fuga"></div>

次の例では、p#hogeのoffsetParentはdiv#piyoとなります。要素のデフォルトのpositionプロパティの値はstaticだからです。この場合、div#fugaは、p#hogeから一番近い祖先要素ですが、「positionプロパティの値がstaticでないこと」という条件を満たさないため、offsetParentにはなり得ません。だから、次に近いdiv#piyoがoffsetParentとなります。

HTML

<div id="piyo">
	<div id="fuga">
		<p id="hoge">SYNCER</p>
	</div>
</div>

CSS

div#piyo {
	position: relative ;
}

JavaScript

var element = document.getElementById( "hoge" ) ;
var offsetParentElement = element.offsetParent ;	// <div id="piyo"></div>

該当する要素がなければ、body要素が返ります。例えば下記のような場合です。div#fugaもdiv#piyoもpositionプロパティを指定していないので、初期値のstaticが適用されます。そのため、p#hogeの祖先には条件を満たす包含要素が存在しません。

HTML

<body>
	<div id="piyo">
		<div id="fuga">
			<p id="hoge">SYNCER</p>
		</div>
	</div>
</body>

CSS

div#piyo {
	/* position: relative ; */
}

div#piyo {
	/* position: relative ; */
}

JavaScript

var element = document.getElementById( "hoge" ) ;
var offsetParentElement = element.offsetParent ;	// <div id="piyo"></div>

デモ

HTMLElement.offsetParentを取得するデモです。div#hogeのoffsetParentとなる要素を取得し、そのid属性値を表示します。スタイルシートのコメント部分を削除すると結果が変わるのも確認しましょう。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#fuga {
	/*position: relative ;*/
	background-color: blue ;
}

div#piyo {
	position: relative ;
	background-color: green ;
}

div#fuga, div#piyo {
	padding: 40px ;
	border: 1px solid #000 ;
}

div#hoge {
	position: absolute ;
	top: 40px ;
	left: 40px ;

	background-color: red ;
	width: 80px ;
	height: 40px ;
	line-height: 40px ;
	color: #fff ;
}
</style>
</head>
<body id="toto">
<div id="piyo">
	<div id="fuga">
		<div id="hoge">SYNCER</div>
	</div>
</div>

<hr>
<script>
var element = document.getElementById( "hoge" ) ;

console.log( element.offsetParent ) ;
document.body.appendChild( new Text( element.offsetParent.tagName + "要素 (#" + element.offsetParent.id + ")" ) ) ;
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月23日 (土)
コンテンツを公開しました。