요소의 크기를 가져올 때 어떤 메소드를 사용해야할까?🤔
대략적으로 아래와 같은 메소드들이 있다.
-
offsetWidth: 요소의 가시적인 너비를 가져온다.- 패딩(padding), 테두리(border), 스크롤바(scrollbar)를 포함한 전체 너비를 반환
-
offsetHeight: 요소의 가시적인 높이를 가져온다.- 패딩(padding), 테두리(border), 스크롤바(scrollbar)를 포함한 전체 높이를 반환
-
clientWidth: 요소의 내용 영역의 너비를 가져온다.- 패딩(padding)을 포함한 내용 영역의 너비를 반환
- 테두리(border)와 스크롤바(scrollbar)는 제외
-
clientHeight: 요소의 내용 영역의 높이를 가져온다.- 패딩(padding)을 포함한 내용 영역의 높이를 반환
- 테두리(border)와 스크롤바(scrollbar)는 제외
-
scrollWidth: 요소의 콘텐츠가 스크롤 없이 보이는 데 필요한 최소 너비를 가져온다.- 스크롤바(scrollbar)가 표시되지 않는 경우, 요소의 내용 영역의 전체 너비를 반환
-
scrollHeight: 요소의 콘텐츠가 스크롤 없이 보이는 데 필요한 최소 높이를 가져온다.- 스크롤바(scrollbar)가 표시되지 않는 경우, 요소의 내용 영역의 전체 높이를 반환
getBoundingClientRect(): 요소의 위치와 크기에 대한 정보를 가져온다.- 반환된 객체에는 요소의 상대적인 위치와 뷰포트(viewport) 기준에서의 위치, 너비, 높이 등이 포함됨
offsetWidth와 getBoundingClientRect()의 차이는?
offsetWidth는 DOM 요소의 가시적인 너비와 패딩(padding), 테두리(border), 스크롤 막대(scrollbar)를 포함한 전체 너비를 반환하며, 정수형 값으로 반올림한다. 또한 transform 적용시 엘리먼트의 레이아웃 width를 그대로 리턴한다.
<div style="width: 100px; padding: 10px; border: 2px solid black;">Content</div>위와 같은 경우 offsetWidth는 124를 반환
{100(가시적 너비) + 10+10(양쪽 패딩) + 2*2(양쪽 테두리)}
width: 100px;
transform: scale(0.5);위와 같이 너비 100px에 scale(0.5)를 적용해도 offsetWidth는 100px이 된다.
getBoundingClientRect()메서드는 요소의 크기와 위치를 반환하며, 반올림 없이 값을 소수점까지 리턴한다. 또한 transform 적용시 렌더링된 width, height를 리턴한다.
width: 100px;
transform: scale(0.5);위와 같이 너비 100px에 scale(0.5)를 적용하면 getBoundingClientRect().width 값은 50px로 리턴한다.
+추가 : getBoundingClientRect()의 반환된 값은 요소의 위치를 기준으로한 사각형의 정보를 포함하는 DOMRect객체이며, 요소의 상대적인 위치와 뷰포트(Viewport) 기준에서의 위치 등이 포함된다.
때문에 요소가 화면에 어디에 위치하는지, 다른 요소와 겹치는지 등을 판단하는 데 유용하다.
참고로
innerWidth와 outerWidth는 Window 객체 속성이며, 브라우저 창의 크기와 관련된 값이다. (제이쿼리랑 헷갈려서 이걸로 요소너비 잡은 적 있음🫠)
innerWidth: 브라우저 창의 내부 너비를 나타낸다.
(스크롤바를 제외한 실제 내용이 표시되는 영역의 너비)
outerWidth: 브라우저 창의 외부 너비를 나타낸다.
(브라우저 창의 테두리(border)와 스크롤바를 포함한 전체 너비)
⚠️혼동하지 않도록 주의⚠️
자바스크립트의 innerWidth 는 현재 브라우저 창의 내부 너비를 반환하는 반면,
제이쿼리의 innerWidth() 는 선택한 요소의 내부 너비를 반환한다.
자바스크립트랑 제이쿼리를 번갈아 쓰다보면 간혹 ( ) 이거 차이로 혼동해서 쓸 때 있는데 꼭 주의해야겠다✍️
