element.offsetTopは、「element」に指定した要素の垂直方向のオフセットを返すプロパティ。
具体的には、element.offsetParentプロパティで得られる要素から「element」に指定した要素の上端までの距離。
構文
var $offsetTop = $elementNodeReference.offsetTop;
戻り値
指定した要素の垂直方向のオフセット。単位は、ピクセル。
サンプル
垂直方向のオフセット：
サンプルの動作について
「getOffsetTop()」ボタンをクリックすると、「垂直方向のオフセット：」の右横に「30px」と表示する。
「30px」は、id属性が「sampleWrap」である赤いボックス要素のCSSの「padding: 10px;」と、id属性が「sample」である枠線がグレーのボックス要素のCSS「margin: 20px 30px;」で指定した上のマージン「20px」を足した数値。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function getOffsetTop() {
var $elementNodeReference = document.getElementById( "sample" );
var $offsetTop = $elementNodeReference.offsetTop;
document.getElementById( "sampleOutput1" ).innerHTML = $offsetTop + "px";
}
</script>
function getOffsetTop() {
var $elementNodeReference = document.getElementById( "sample" );
var $offsetTop = $elementNodeReference.offsetTop;
document.getElementById( "sampleOutput1" ).innerHTML = $offsetTop + "px";
}
</script>
CSS
<style type="text/css">
#sampleWrap{
position: relative;
padding: 10px;
background-color: red;
}
#sample{
height: 100px;
width: 300px;
padding: 10px;
margin: 20px 30px;
background-color: #fffee7;
border: 5px solid #dddddd;
border-radius: 5px;
}
</style>
#sampleWrap{
position: relative;
padding: 10px;
background-color: red;
}
#sample{
height: 100px;
width: 300px;
padding: 10px;
margin: 20px 30px;
background-color: #fffee7;
border: 5px solid #dddddd;
border-radius: 5px;
}
</style>
HTML
<div id="sampleWrap">
<div id="sample">
<button onclick="getOffsetTop();">getOffsetTop()</button>
<p>垂直方向のオフセット：<span id="sampleOutput1"></span></p>
</div>
</div>
<div id="sample">
<button onclick="getOffsetTop();">getOffsetTop()</button>
<p>垂直方向のオフセット：<span id="sampleOutput1"></span></p>
</div>
</div>