티스토리 뷰
발생일: 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;
};
반응형
댓글
공지사항