[DOM_Element] JS - offsetTop 속성 - 가시 상단 위치 (IE8 이상)

offsetTop 예제

 

<style>

#hz {

  top: 100px;

  margin: 10px;

  padding: 10px;

  width: 300px;

  position: relative;

  border: 5px solid black

}

</style>

<div id="hz">

  <p><button onclick="homzzang()">클릭</button></p>

  <p>offsetTop (= top 100 + margin 10) : <span id="demo"></span></p>

</div>

<script>

function homzzang() {

  var hz = document.getElementById("hz");

  document.getElementById("demo").innerHTML = hz.offsetTop;

}

</script>

 

결과보기

결과값: offsetTop (= top 100 + margin 10) : 110

※ offsetParent 요소의 위쪽 기준으로 위쪽 위치를 픽셀단위로 반환