offsetParent의 모든것!
Scripter/JAVASCRIPT / 2010. 2. 4. 13:54
이전에 getBoundingClientRect()에 대해서 포스팅한적이 있다. 이 함수는 객체의 페이지내의 위치값과 너비, 높이값을 반환한다. 편리하게 사용했었는데 오늘 역시 이부분을 짚고 넘어가야할 문제에 봉착했다.
기존에 데꾸벅이 2002년도에 제작해 지금껏 수정하면서 써오고 있는 캘린더가 IE8에서 동작하지 않는것이다. 문제는 각 브라우저에서 객체의 offsetParent 값을 계산하는 방법이 틀려서 생긴 문제였다. 특히 IE8....
처음에는 body를 못찾는 문제인줄 알았는데 IE에서의 객체 위치값을 표현하는 offsetParent값에 문제가 있다는 것을 알게되었다. 관련내용을 찾다가 아주 좋은 글을 발견(?)하여 포스팅한다.
아래는 HappyFriday님의 글을 인용한것임을 밝힌다.
언제나 그렇지만 항상 IE가 문제다.
크로싱을 위한 최고의 난적은 대부분 IE이다. 일단 offsetParent는 무엇일까? 말그대로 현재 대상 엘리먼트를 transform 하는 상위 엘리먼트를 참조하는 속성이다. 일반적으로 parentNode와는 다른 개념으로 이것은 concatenate 가 적용되는 부모 엘리먼트에만 유효하기 때문에...꼭 대상 엘리먼트의 상위엘리먼트를 의미하지는 않는다.
일반적으로 이 속성에 대한 설명이 자식을 offset하는 엘리먼트라고 나와있는데.. 이해하기가 난해하므로... 자식엘리먼트의 위치에 영향을 미치는 상위 엘리먼트를 치칭 하는것으로 이해하면 되겠다.
그렇다면 자식엘리먼트에 영향을 미친다는건 무엇일까? 바로 position 속성이다. 모든 엘리먼트의 position속성은 기본이 static이다. 즉 정적상태를 유지하는것... 따라서 position이 relative / absolute가 되었을때 바로 자식엘리먼트에 영향을(좌표상으로) 미치게 됨으로offsetParent를 반환하는 대상 엘리먼트는 반드시 position이 relative나 absolute가 되어야 한다.
즉 수식으로는 getStyle(obj, 'position) != 'static' 으로 표현될 수 있다.
일반적으로 offsetParent가 많이 사용되는 부분은 대상엘리먼트를 글로벌 좌표포지션으로 변환한 후 이값을 활용하는 곳들이다.
그런데..IE브라우져(ie8 이하)의 경우 상위 엘리먼트의 position이 'relative' 일때 자신의 offsetLeft가 0이 되어야 하는데 디폴트로 최상위 엘리먼트의 padding (paddingLeft/paddingTop)값을 취하도록 설계되어 있다. 이해를 돕기 위해서 다음 코드를 보자.
위의 노드중 d의 입장에서는 부모 position이 relative이기 때문에 당연 자신의 offsetLeft는 0이어야 한다.
왜냐면 상대경로로 다시 초기화 되었으니..부모입장에서 padding값이 들어간게 아니니까... 만약 부모의 position이 relative가 아니면 그제서야 부모 offsetParent가 static이 됨으로 그때는 자신이 30의 값을 가져야 한다. 그런데 IE7는 무조건 30의 값을 가지고 시작한다. 즉 최상위 a의padding(padding-left)이 30임으로 그값에 영향을 받아서 표시를 하게된다. 바로 이게 문제다. 이 문제로 인해 최종 글로벌 포지션의 left는30이어야 함에도 불구하고 60이 되어버린다. 결국 이중값이 들어간다는 말이다.
따라서 IE7의 경우에는 바로 이 최상위 엘리먼트, 즉 body바로 밑의 엘리먼트를 구한후 (이것은 해당 엘리먼트가 position이 relative나absolute가 아닌경우 반환하지 않으므로) 해당 엘리먼트의 padding값을 빼줘야 한다.
크로싱을 위한 최고의 난적은 대부분 IE이다. 일단 offsetParent는 무엇일까? 말그대로 현재 대상 엘리먼트를 transform 하는 상위 엘리먼트를 참조하는 속성이다. 일반적으로 parentNode와는 다른 개념으로 이것은 concatenate 가 적용되는 부모 엘리먼트에만 유효하기 때문에...꼭 대상 엘리먼트의 상위엘리먼트를 의미하지는 않는다.
일반적으로 이 속성에 대한 설명이 자식을 offset하는 엘리먼트라고 나와있는데.. 이해하기가 난해하므로... 자식엘리먼트의 위치에 영향을 미치는 상위 엘리먼트를 치칭 하는것으로 이해하면 되겠다.
그렇다면 자식엘리먼트에 영향을 미친다는건 무엇일까? 바로 position 속성이다. 모든 엘리먼트의 position속성은 기본이 static이다. 즉 정적상태를 유지하는것... 따라서 position이 relative / absolute가 되었을때 바로 자식엘리먼트에 영향을(좌표상으로) 미치게 됨으로offsetParent를 반환하는 대상 엘리먼트는 반드시 position이 relative나 absolute가 되어야 한다.
즉 수식으로는 getStyle(obj, 'position) != 'static' 으로 표현될 수 있다.
일반적으로 offsetParent가 많이 사용되는 부분은 대상엘리먼트를 글로벌 좌표포지션으로 변환한 후 이값을 활용하는 곳들이다.
그런데..IE브라우져(ie8 이하)의 경우 상위 엘리먼트의 position이 'relative' 일때 자신의 offsetLeft가 0이 되어야 하는데 디폴트로 최상위 엘리먼트의 padding (paddingLeft/paddingTop)값을 취하도록 설계되어 있다. 이해를 돕기 위해서 다음 코드를 보자.
<div id='a' style='background-color:#ff0000; padding:30px; '>
<div id='b' style='position:relative; background-color:#000000; '>
<div id='c' style='position:relative; background-color:#0ff000; '>
<div id='d' style='background-color:#666666;'>
aaaa<br>
aaaa<br>
</div>
</div>
</div>
<div>
<div id='b' style='position:relative; background-color:#000000; '>
<div id='c' style='position:relative; background-color:#0ff000; '>
<div id='d' style='background-color:#666666;'>
aaaa<br>
aaaa<br>
</div>
</div>
</div>
<div>
위의 노드중 d의 입장에서는 부모 position이 relative이기 때문에 당연 자신의 offsetLeft는 0이어야 한다.
왜냐면 상대경로로 다시 초기화 되었으니..부모입장에서 padding값이 들어간게 아니니까... 만약 부모의 position이 relative가 아니면 그제서야 부모 offsetParent가 static이 됨으로 그때는 자신이 30의 값을 가져야 한다. 그런데 IE7는 무조건 30의 값을 가지고 시작한다. 즉 최상위 a의padding(padding-left)이 30임으로 그값에 영향을 받아서 표시를 하게된다. 바로 이게 문제다. 이 문제로 인해 최종 글로벌 포지션의 left는30이어야 함에도 불구하고 60이 되어버린다. 결국 이중값이 들어간다는 말이다.
따라서 IE7의 경우에는 바로 이 최상위 엘리먼트, 즉 body바로 밑의 엘리먼트를 구한후 (이것은 해당 엘리먼트가 position이 relative나absolute가 아닌경우 반환하지 않으므로) 해당 엘리먼트의 padding값을 빼줘야 한다.
nexCalendar.js'Scripter > JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트 delete 연산자에 대한 고찰 (8) | 2009.11.18 |
|---|---|
| Javascript로된 Wiki Parser : Creole 1.0 (0) | 2009.01.12 |
| 자바스크립트 가이드 (0) | 2008.12.03 |
| JsonML 활용하기 (0) | 2008.11.12 |
| CSS & JAVASCRIPT 최적화 도구 (0) | 2008.10.26 |