티스토리 뷰

발생일: 2015.04.15

키워드: IE8, getBoundingClientRect

문제:
`Element#getBoundingClientRect()`로 엘리먼트의 사이즈를 가져와 처리하는 코드를 작성했는데, IE8에선 동작하지 않는다.
왜일까?

해결책:
`getBoundingClientRect()` 의 width 와 height 속성은 IE9부터 지원한다.

또한, IE8 이하에서 getBoundintClientRect() 의 리턴된 rect 객체는 읽기 전용이기 때문에,
다른 속성을 할당하는 것만으로도 오류가 발생한다.

    rect.height = 100; //—> IE8에서 오류 발생


편의를 위해 아래와 같은 유틸리티를 만들어서 사용하는 방식으로 처리했다.

    var getBoundingClientRect = function (el) {
        var rect = el.getBoundingClientRect();

        if (typeof rect.width === 'undefined') {
            // IE에서의 rect는 읽기 전용으로 쓸 수 없다.
            return {
                top: rect.top,
                bottom: rect.bottom,
                left: rect.left,
                right: rect.right,
                width: rect.right - rect.left,
                height: rect.bottom - rect.top
            };
        }

        return rect;
    };


반응형
댓글
공지사항