Element.offsetTop- オフセットの高さを取得する

投稿日: / 更新日:

JavaScriptの、ElementオブジェクトのoffsetTopはオフセットの高さを取得するプロパティです。

説明

offsetTopプロパティはオフセットの高さを表します。具体的には、offsetParentとなる要素のpaddingの上端部分から、その要素のborderの上端部分までの幅です。offsetParentのborderは計算に含まれない、という点にご注意下さい。

上記を見て下さい。茶色い枠線の要素(茶色い要素)が、青い枠線の要素(青い要素)のoffsetParentだと仮定します。この時、青い要素のoffsetTopは、茶色い要素の、borderを含めない上端から、青い要素のborderの上端までの幅となります。

offsetParentとは、単純にその要素の親要素というわけではありません。ある要素がoffsetParentになるルールはoffsetParentプロパティの説明をご参考下さい。

サンプルコード

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

// offsetTopを取得
var offsetTop = divElement.offsetTop ;

デモ

id属性がtargetのdiv要素の、offsetTopを取得して表示します。数値がどの部分の合計か考えてみて下さい。

構文

readonly long offsetTop = Element.offsetTop

返り値

項目説明
offsetTopoffsetParentのpaddingの上端から、対象要素のborderの上端までの幅。

関連項目