HTML DOM offsetLeft 속성 – 요소의 왼쪽 위치를 픽셀로 확인하는 방법

HTML DOM offsetLeft 속성은 지정된 요소의 왼쪽 위치가 부모 요소의 왼쪽 경계로부터 얼마나 떨어져 있는지를 나타내는 숫자 값을 반환합니다. 이 값은 픽셀(px) 단위로 제공되며, 요소의 실제 화면상 배치를 계산할 때 유용하게 활용됩니다.

구문

offsetLeft 속성은 다음과 같이 사용하며, 픽셀(px) 단위의 숫자 값을 반환합니다.

HTMLelement.offsetLeft

반환되는 값에는 다음 항목들이 포함됩니다.

지정된 요소 자체의 왼쪽 위치와 왼쪽 마진(margin)
부모 요소의 왼쪽 패딩(padding), 스크롤바 너비, 테두리(border) 두께, 그리고 왼쪽 마진

즉, offsetLeft는 단순히 CSS의 left 값만을 의미하는 것이 아니라, 부모 요소의 여러 박스 모델 요소까지 모두 고려한 최종 오프셋 값이라는 점에 주목할 필요가 있습니다.

예제

다음은 HTML DOM offsetLeft 속성의 동작을 확인할 수 있는 예제입니다. 버튼을 클릭하면 폼(form) 요소의 왼쪽 오프셋과 함께, getComputedStyle() 메서드로 가져온 CSS 스타일 값들을 함께 출력하여 차이를 비교해 볼 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetLeft</title>
<style type="text/css">
    #picForm {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    #containerDiv {
        margin: 0 auto;
    }
</style>
</head>
<body>
    <form id="picForm">
        <fieldset>
            <legend>HTML-DOM-offsetLeft</legend>
            <div id="containerDiv">
                <img id="image" src="https://www.tutorialspoint.com/ios/images/ios-mini-logo.jpg">
            </div>
            <input type="button" onclick="getLeft()" value="Get offsetLeft">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var picForm = document.getElementById("picForm");
    var containerDiv = document.getElementById("containerDiv");
    function getLeft() {
        // window.getComputedStyle()로 계산된 CSS 스타일을 가져옵니다.
        var style = window.getComputedStyle(picForm);
        var style2 = window.getComputedStyle(document.body);
        divDisplay.innerHTML = '폼(form)의 왼쪽 오프셋: '+picForm.offsetLeft+'px';
        divDisplay.innerHTML += '<br>자식 요소(폼)의 left 위치: '+style.left;
        divDisplay.innerHTML += '<br>자식 요소(폼)의 왼쪽 마진: '+style.marginLeft;
        divDisplay.innerHTML += '<br>부모 요소(body)의 왼쪽 패딩: '+style2.paddingLeft;
        divDisplay.innerHTML += '<br>부모 요소(body)의 왼쪽 테두리: '+style2.borderLeftWidth;
        divDisplay.innerHTML += '<br>부모 요소(body)의 왼쪽 마진: '+style2.marginLeft;
}
</script>
</body>
</html>

실행 결과

버튼을 클릭하기 전 화면은 다음과 같습니다.

HTML DOM offsetLeft 속성 – 요소의 왼쪽 위치를 픽셀로 확인하는 방법

'Get offsetLeft' 버튼을 클릭한 후, 폼 요소의 왼쪽 오프셋 값과 관련 CSS 스타일 정보가 아래와 같이 표시됩니다.

HTML DOM offsetLeft 속성 – 요소의 왼쪽 위치를 픽셀로 확인하는 방법

실행 결과를 보면 offsetLeft 값이 단순히 CSS의 left 속성값과 일치하지 않는 것을 확인할 수 있습니다. 이는 앞서 설명했듯이 offsetLeft가 부모 요소의 패딩, 테두리, 마진 등을 모두 반영한 최종 위치 값이기 때문입니다. 이러한 특성 덕분에 offsetLeft는 드래그 앤 드롭 구현, 요소 위치 계산, 충돌 감지 등 다양한 웹 개발 시나리오에서 정확한 좌표 정보를 얻는 데 활용됩니다.