일반 getBoundingClientRect in FF3

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

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;
    }
}


번호 제목 글쓴이 날짜 조회 수
186 체크박스에 체크된 항목 개수 구하기 황제낙엽 2023.06.10 588
185 javascript array contains method 황제낙엽 2011.08.19 588
184 두 서버의 자원을 접근하는 클라이언트 프레임웍(Next.js)에서의 CORS오류 file 황제낙엽 2021.12.05 583
183 XMLHttpRequest.timeout 황제낙엽 2018.11.03 575
182 브라우저의 스크롤을 따라다니는 레이어 두번째 file 황제낙엽 2002.12.20 574
181 Page Refresh/Reload 황제낙엽 2007.08.24 570
180 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 569
179 문자열에서 역슬래시(backslash) 문자와 유니코드(Unicode)에 대한 고찰 file 황제낙엽 2021.06.03 569
178 소스 보기 막기 황제낙엽 2005.11.18 567
177 브라우저에서 이미지를 편집(crop 등) 할 수 있는 오픈소스 Cropper.js 황제낙엽 2024.11.16 560
176 Jasmine 테스트 및 CI 구축 가이드 황제낙엽 2016.11.16 559
175 CryptoJS 를 이용한 암호화 황제낙엽 2023.02.15 555
174 Understanding User-Agent Strings 황제낙엽 2011.02.22 555
173 CKEditor 3 JavaScript API Documentation 황제낙엽 2011.11.14 552
172 자바스크립트 내장 함수 활용하기 황제낙엽 2005.04.25 551
171 [JavaScript Tutorials] JavaScript and memory leaks (해석중) 황제낙엽 2009.04.08 550
170 팝업창을 다시 띄우지 않는 소스 황제낙엽 2005.07.16 549
169 UTF-8 한글 초성 추출 (자바스크립트) 황제낙엽 2019.05.07 547
168 How to use Rhino to script Java classes. 황제낙엽 2008.07.14 546
167 XP 에서 input type=text 와 input type=password 의 사이즈가 틀리게 보일때 황제낙엽 2004.08.04 543