HTML DOM offsetParent 속성 – 자식 요소 오프셋의 기준이 되는 부모 요소 알아보기

HTML DOM의 offsetParent 속성은 자식 요소의 위치(오프셋)가 정의되는 기준이 되는 참조 부모 요소를 반환합니다. 즉, 특정 요소의 offsetTop, offsetLeft 값이 어떤 조상 요소를 기준으로 측정되는지 확인하고 싶을 때 이 속성을 활용할 수 있습니다.

문법(Syntax)

참조되는 오프셋 부모 요소를 반환하는 기본 문법은 다음과 같습니다.

HTMLelement.offsetParent

그럼 HTML DOM offsetParent 속성이 실제로 어떻게 동작하는지 예제를 통해 살펴보겠습니다.

예제(Example)

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetParent</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-offsetParent</legend>
            <div id="containerDiv">
                <img id="image" src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg">
            </div>
            <input type="button" onclick="getParent()" value="Get offsetParent">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var picForm = document.getElementById("picForm");
    var containerDiv = document.getElementById("containerDiv");
    function getParent() {
        divDisplay.textContent = 'Offset for Image form is referenced from: '+picForm.offsetParent;
    }
</script>
</body>
</html>

출력 결과(Output)

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

HTML DOM offsetParent 속성 – 자식 요소 오프셋의 기준이 되는 부모 요소 알아보기

'Get offsetParent' 버튼을 클릭한 후에는 해당 폼의 오프셋이 참조하는 부모 요소 정보가 화면에 표시됩니다.

HTML DOM offsetParent 속성 – 자식 요소 오프셋의 기준이 되는 부모 요소 알아보기

참고 사항

요소 자신 또는 조상 요소 중 display: noneoffsetParent는 null을 반환합니다.
position: fixed로 지정된 요소의 offsetParent 역시 null입니다.
<body> 요소의 offsetParent는 항상 null을 반환합니다.
레이아웃 계산이 필요한 속성이므로 반복문 안에서 남용하면 성능 저하가 발생할 수 있으니 주의해야 합니다.