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임.