DOM offset #

브라우저별 offsetParent 최상위 엘리먼트 #

브라우저별로 최상위 엘리먼트가 다릅니다. 최상위의 offsetParent는 null입니다.

IE : html (body 없음)
파이어폭스 : body

파이어폭스 offsetLeft, offsetTop 버그 #

파이어폭스에서 offsetLeft와 offsetTop에 동일한 증상의 버그가 있습니다. 다음과 같이 Parent와 Child의 Div 객체가 있다고 할때, Parent의 스타일 중에 position:absolute값과 overflow:hidden값이 있으면 Child의 offsetLeft와 offsetTop 값에 Parent의 보더 크기만큼이 부족하게 됩니다.

<div id="Parent">
    <div id="Child"></div>
</div>

스타일을 다음과 같이 정의하면, 확인할 수 있습니다.

<style type="text/css">
    #Parent {
        position: absolute;
        overflow: hidden;
        border: 5px solid #000;
    }
    #Child {
        position: absolute;
        left: 10px;
        top: 20px;
    }
</style>

이 경우, Child의 offsetParent는 Parent가 되며, 따라서 Child.offsetLeft는 10, Child.offsetTop은 20 값이 기대됩니다. 그러나 파이어폭스에서 확인해보면, Child.offsetLeft는 5, Child.offsetTop은 15 값임을 확인할 수 있습니다.

offsetLeft, offsetTop 계산 #

테두리(border)의 안쪽부터 계산된다.

offsetWidth, offsetHeight 계산 #

offsetWidth = border width + padding + width