[JavaScript] 브라우저와 요소의 크기(너비, 높이) 구하기

먼저 브라우저의 너비와 높이를 구하는 방법에 대해 살펴보겠습니다.

 

1. window.innerWidth / window.innerHeight
2. window.outerWidth / window.outerHeight
3. window.screen.width / window.screen.height

 

 

🤔 window.innerWidth / window.innerHeight

window.innerWidth는 브라우저 화면의 너비, window.innerHeight는 브라우저 화면의 높이를 나타냅니다.

 

전체 브라우저에서 스크롤바, 상단바, 개발자도구창 등을 모두 제외한 화면만의 너비와 높이를 출력합니다.

 

🤔 window.outerWidth / window.outerHeight

window.outerWidth는 브라우저 전체의 너비, window.innerHeight는 브라우저 전체의 높이를 나타냅니다.

 

🤔 window.screen.width / window.screen.height

window.screen.width는 전체 모니터의 너비, window.screen.height는 전체 모니터의 높이를 나타냅니다.

 

출처 : https://zzznara2.tistory.com/622

 

 

---

 

 

다음으로 요소의 너비와 높이를 구하는 방법에 대해 살펴보겠습니다.

 

1. element.clientWidth / element.clientHeight
2. element.offsetWidth / element.offsetHeight
3. element.scrollWidth / element.scrollHeight
4. element.getBoundingClientRect()

 

 

🤔 element.clientWidth / element.clientHeight

element.clientWidth 는 padding까지 포함된 요소의 너비를,  element.clientHeight 는 padding까지 포함된 요소의 높이를 나타냅니다. 

 

🤔 element.offsetWidth / element.offsetHeight

element.offsetWidth 는 border까지 포함된 요소의 너비를, element.offsetHeight 는 border까지 포함된 요소의 높이를 나타냅니다.

 

🤔 element.scrollWidth / element.scrollHeight

element.scrollWidth, element.scrollHeight는 사용자에게 보여지는 가시적인 부분의 너비와 높이가 아닌 content 전체 영역의 너비와 높이를 나타냅니다.

 

🤔 element.getBoundingClientRect()

getBoundingClientRect는 요소의 너비, 높이, position 값 등을 받아옵니다.

우리가 볼 요소의 너비와 높이를 받아올 때에는 border까지 포함된 요소의 너비와 높이를 받아옵니다.

 

이는 offsetWidth, offsetHeight와 동일합니다. 차이점이 뭘까요?

offsetWidth, offsetHeight는 본래 레이아웃의 사이즈를 받아옵니다.

getBoundingClientRect를 통해 받아온 너비/높이는 실제로 화면에 렌더링된 값을 받아옵니다. (transform등의 효과까지 모두 고려된 값)

 

getBoundingClientRect()에서 원하는 값을 가져올 때에는 

element.getBoundingClientRect().속성값 으로 가져올 수 있습니다.

(ex. element.getBoundingClientRect().width)

 

정사각형이 있습니다. 이 정사각형의 스타일은 다음과 같습니다.

div {
    width: 200px;
    height: 200px;
    border: 5px solid #329;
    padding: 20px;
    margin: 30px;
}

그리고 콘솔창에 이 div의 width값을 다양한 방법으로 찍어보겠습니다.

clientWidth를 사용해 가져온 width값

offsetWidth를 사용해 가져온 widh 값

이렇게 clientWidth는 padding까지 포함된 240을, offsetWidth는 border까지 포함된 250을 받아옵니다.

여기서 박스에 스크롤이 생기도록 div안에 아무 의미없는 글자들을 넣고 overflow: auto 처리를 해보겠습니다.

 

이렇게 박스에 스크롤이 생긴 상태에서 콘솔창에 scrollHeight를 찍어보면 다음과 같은 결과가 나옵니다.

scrollHeight를 사용해 가져온 height 값

scrollHeight는 박스의 보여지는 높이가 아닌 content 전체의 높이를 받아옵니다.

 

 

getBoundingClientRect()를 통해 가져온 width값도 border을 포함한 250을 받아옵니다.