티스토리 뷰
발생일: 2015.01.16
키워드: element, offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth, scrollHeight,
getBoundingClientRect(), element size, dimension
내용:
엘리먼트의 크기를 구하는 방법에는 여러 가지가 있다.
offsetWidth, clientWidth, scrollWidth 속성이나 `getBoundingClientRect()`로 가져올 수 있고,
각 속성이나 메서드의 차이점은 아래와 같다.
offsetWidth, offsetHeight
일반적으로 엘리먼트의 전체 크기를 알고 싶다면, `offsetWidth`와 `offsetHeight` 속성을 가져오면 된다.
이 속성은 엘리먼트의 패딩과 보더, 스크롤바의 사이즈를 포함한 값을 리턴한다.
clientWidth, clientHeight
만약, 실제로 보여지고 있는 컨텐츠가 얼마만큼의 공간을 차지하고 있는지 확인하고 싶다면,
`clientWidth`와 `clientHeight` 속성을 사용하는 것이 좋다.
이 속성은 보더와 스크롤바의 크기를 제외한 실제 컨텐츠의 크기를 리턴한다. (패딩은 포함하고 있다)
scrollWidth, scrollHeight
만약, 보이는 것과 상관 없이 실제 컨텐츠 영역이 얼마만큼의 크기를 갖고 있는지 확인하고 싶다면,
`scrollWidth`와 `scrollHeight` 속성을 확인하면 된다.
이 속성은 전체 스크롤바를 사용하게 되어 숨겨진 영역까지 포함한 크기를 리턴한다.
getBoundingClientRect()
대부분의 경우엔 `getBoundingClientRect()`은 `offsetWidth`, `offsetHeight`와 거의 같은 값을 리턴한다.
하지만, `transform`이 적용되어 있다면 조금 달라진다.
`offsetWidth`와 `offsetHeight` 속성은 엘리먼트의 레이아웃 크기를 리턴하는 반면,
`getBoundingClientRect()`는 렌더링된 크기를 리턴한다.
예를 들어, 엘리먼트에 다음과 같은 속성이 적용되어 있다고 가정해보자.
width: 100px;
transform: scale(0.5);
이 경우, `offsetWidth`는 100을 리턴하지만, `getBoundingClientRect()`는 50을 리턴한다.
`offsetWidth` 뿐 아니라, 위에서 언급한, `clientWidth`, `scrollWidth` 모두 tranform에 의해 변경된 값은 적용되지 않는다.
따라서, 최종 렌더링된 값을 가져오고 싶다면, `offsetWidth` 대신 `getBoundingClientRect()`를 사용하는 것이 좋다.
참고:
반응형
댓글
공지사항