[DOM_Element] JS - offsetLeft 속성 - 가시좌측위치 (= 가시왼쪽위치) (IE8 이상)

offsetLeft 예제

 

<style>

#hz {

  left: 100px;

  margin: 10px;

  padding: 10px;

  width: 300px;

  position: relative;

  border: 5px solid black

}

</style>

<div id="hz">

  <h3>홈짱닷컴 Homzzang.com</h3>

  <p>left: 100px;</p>

  <p>margin: 10px;</p>

</div>

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

<p>offsetLeft (= body margin 8 + left 100 + margin 10): <span id="demo"></span></p>

<script>

function homzzang() {

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

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

}

</script>

 

결과보기

결과값: offsetLeft (= body margin 8 + left 100 + margin 10): 118

※ 결과보기 사이트 (=codepen.io) 편집창 body 요소의 margin값이 8임.