HTMLElement.offsetTop - 垂直方向のオフセット距離

2017/09/23

offsetTopは、HTMLElementのプロパティです。包含要素(offsetParent)からの、垂直方向のオフセット距離を返します。具体的には、包含要素のpadding-topの上端から、要素のborder-topの上端までの幅です。このプロパティは読み取り専用です。

概要

名前

offsetTop

所属

HTMLElement

IDL

readonly attribute long offsetTop;

仕様書

https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsettop

説明

offsetParentとなる要素のpadding-topの上端から、自身のborder-topの上端までの距離を表すピクセル単位の数値。

チュートリアル

取得はできますが、代入はできません。次の場合、div#fugaのpadding-topの上端から、p#hogeのborder-topの上端までの距離を取得できます。

HTML

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

CSS

div#fuga {
	position: relative ;
}

JavaScript

var element = document.getElementById( "hoge" ) ;
var a = element.offsetTop ;

デモ

HTMLElement.offsetTopを取得するデモです。

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

<!DOCTYPE html>
<html>
<head>
<style>
div#fuga {
	position: relative ;
	background-color: blue ;
	padding: 40px ;
	border: 1px solid #000 ;
}

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

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

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

console.log( element.offsetTop ) ;
document.body.appendChild( new Text( element.offsetTop ) ) ;
</script>
</body>
</html>