getBoundingClientRect() 의 수치 반환 문제
Posted: 2010 02 25 06:31 27
element.getBoundingClientRect() 에 대해서는
https://developer.mozilla.org/en/DOM/el ... ClientRect
를 참고하세요.
top, bottom, left, right는 (그리고 width, height도) 값이 정수여야 합니다.
그런데 어떤 상황에서는 소수점 값을 가집니다.
이 페이지에서 주소표시줄에 다음 코드를 입력해보세요.
javascript:alert(document.getElementById("middle").getBoundingClientRect().bottom)
본문 div의 bottom 값이 메시지 되는데 소수점으로 뜰 겁니다.
정확한 연산과정을 모르기에 이유는 알 수 없지만 아마 렌더링 과정의 연산값을 그대로 돌려주는게 아닌가 싶습니다.
즉, pt 값이 포함된 경우나 곱셈 과정이 있을 경우 픽셀 단위가 소수점으로 나오는 경우가 종종 있는데, 렌더링 결과에서는 소수점 이하를 처리하지만 getBoundingClientRect() 에서는 그 과정을 거치기 전의 값을 그대로 반환하는게 아닌가...
IE, Chrome, Opera 등 다른 브라우저에서는 모두 정수값으로 확인됩니다.
https://developer.mozilla.org/en/DOM/el ... ClientRect
를 참고하세요.
top, bottom, left, right는 (그리고 width, height도) 값이 정수여야 합니다.
그런데 어떤 상황에서는 소수점 값을 가집니다.
이 페이지에서 주소표시줄에 다음 코드를 입력해보세요.
javascript:alert(document.getElementById("middle").getBoundingClientRect().bottom)
본문 div의 bottom 값이 메시지 되는데 소수점으로 뜰 겁니다.
정확한 연산과정을 모르기에 이유는 알 수 없지만 아마 렌더링 과정의 연산값을 그대로 돌려주는게 아닌가 싶습니다.
즉, pt 값이 포함된 경우나 곱셈 과정이 있을 경우 픽셀 단위가 소수점으로 나오는 경우가 종종 있는데, 렌더링 결과에서는 소수점 이하를 처리하지만 getBoundingClientRect() 에서는 그 과정을 거치기 전의 값을 그대로 반환하는게 아닌가...
IE, Chrome, Opera 등 다른 브라우저에서는 모두 정수값으로 확인됩니다.