일반 getBoundingClientRect in FF3

황제낙엽 2013.01.11 18:16 조회 수 : 424

sitelink1  
sitelink2  
sitelink3  
sitelink4 http://1 
extra_vars4 ko 
extra_vars5 http://techbug.tistory.com/108 
extra_vars6 sitelink1 
IE5에서 첫선을 보인 객체.getBoundingClientRect는 객체의 offset의 top, left,width,height를 반환하는 멋진놈이다.
일반적으로 gecko 엔진을 사용하는 FF2에서는 getBoxObjectFor(객체)를 사용했으나
FF3에서는  getBoundingClientRect도 지원한다.

FF3가 출시되자 마자 기존 스크립트들을 많이 바꾸고 있는데 이중에 getBoundingClientRect가 포함되었다.
드디어 FF도 IE의 손을 들어준것인가? IE8에서는 얼마만큼 오픈소스진영의 손을 들어줄것인지 귀추가 주목된다.


bounding.png


데꾸벅이 사용하는 객체의 offset left,top,width, height반환하는 함수
/**
 * tag 객체의 위치값 및 너비/높이값을 반환한다.
 * @param {objId} DOM객체 : document.getElementById()
 * @return {ret} left,top,width,height 를 반환한다.
 * @author 데꾸벅
 */
function getBoundsObject(objId){
    var techbug = new Object();
    var tag = document.getElementById(objId);

    if(tag !=null && tag != undefined ){
        if(tag.getBoundingClientRect){ //IE, FF3 
            var rect = tag.getBoundingClientRect();
            techbug.left = rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft);
            techbug.top = rect.top + (document.documentElement.scrollTop || document.body.scrollTop);
            techbug.width = rect.right - rect.left;
            techbug.height = rect.bottom - rect.top +1; // +1 = Moz와 맞춤
        } else  if (document.getBoxObjectFor) { // gecko 엔진 기반 FF3제외
            var box = document.getBoxObjectFor(tag);
            techbug.left = box.x;
            techbug.top = box.y;
            techbug.width = box.width;
            techbug.height = box.height;
        }else {
            techbug.left = tag.offsetLeft;
            techbug.top = tag.offsetTop;
            techbug.width = tag.offsetWidth;
            techbug.height = tag.offsetHeight  + 3;  // +1 = Moz와 맞춤
            var parent = tag.offsetParent;
            if (parent != tag) {
                while (parent) {
                    techbug.left += parent.offsetLeft;
                    techbug.top += parent.offsetTop;
                    parent = parent.offsetParent;
                }
            }
            // 오페라와 사파리의 'absolute' postion의 경우 body의 offsetTop을 잘못 계산 보정
            var ua = navigator.userAgent.toLowerCase();
            if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && getStyle(tag, 'position') == 'absolute' )) {
                techbug.top -= document.body.offsetTop;
            }

        }
        return techbug;
    }
}


번호 제목 글쓴이 날짜 조회 수
94 입력받은 날짜와 현재 날짜와의 비교 함수 황제낙엽 2019.08.02 909
93 사용자 모듈 만들기 황제낙엽 2019.07.09 42090
92 charcode 32와 160 차이 (javascript char 160 to 32) 황제낙엽 2019.05.11 427
91 부동소수점 (floating-point) file 황제낙엽 2018.03.26 1441
90 브라우저의 새로고침과 종료에 대한 이벤트 황제낙엽 2017.08.11 3102
89 자바스크립트 타입 비교 테이블 + 테이블 작성 스크립트 [1] file 황제낙엽 2017.06.23 440
88 |= 비트 OR 대입 연산자 (복합대입연산자) 황제낙엽 2017.03.15 463
87 Jasmine 테스트 및 CI 구축 가이드 황제낙엽 2016.11.16 542
86 QUnit을 이용한 JavaScript 단위 테스트 file 황제낙엽 2016.11.16 418
85 멤버 연산자 황제낙엽 2014.12.30 418
84 연산자 this 황제낙엽 2014.12.30 387
83 typeof 와 instanceof의 차이, 타입 또는 클래스 구분하기 황제낙엽 2013.10.24 409
82 HTTP Content-Type 정리 황제낙엽 2013.09.30 454
» getBoundingClientRect in FF3 file 황제낙엽 2013.01.11 424
80 Stack (스택) 예제 프로그램 황제낙엽 2012.12.27 408
79 Javascript delete 황제낙엽 2012.06.11 444
78 delete 연산자에 대한 고찰 황제낙엽 2012.06.11 456
77 자바스크립트의 쉬프트 연산자 (Shift Operator) 와 음수 (Negative) 이야기 황제낙엽 2012.05.31 1079
76 연산자 (===, ==, >=, <=) 황제낙엽 2012.05.30 416
75 JavaScript 재입문 황제낙엽 2012.05.29 389