offsetLeft 속성

offsetLeft 속성은 요소의 offsetParent에 대한 왼쪽 오프셋을 포함합니다. offsetParent로부터 요소의 경계까지의 거리를 포함합니다.

문법

javascriptelement.offsetLeft;

예제

요소의 자신의 offsetParent에 대한 오프셋을 찾아봅시다:

html<div id="parent" style="position: relative;">
  <div id="elem" style="position: absolute; left: 100px"></div>
</div>

javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetLeft);

코드 실행 결과:

javascript100

예제

margin 여백도 오프셋에 합산됩니다:

html<div id="parent" style="position: relative;">
  <div id="elem" style="position: absolute; left: 100px; margin: 50px"></div>
</div>

javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetLeft);

코드 실행 결과:

javascript150

참고 항목