HTMLElement의 너비와 높이값을 알고 싶다!

시작하며

토이 프로젝트를 진행해던 중 HTMLElement의 스크롤 된 총 높이를 알고 싶었다!

어떻게 구하면 될 것인가?

#outer {
    width: 400px;
    height: 400px;
    border: 2px solid blue;
    overflow: scroll;
    padding: 10px;
  }
  #inner {
    height: 800px;
    background-color: grey;
  }

각각의 css는 위와 같다.
outer는 400400
inner 는 400800 으로
자식 요소가 부모 요소보다 높이가 더 큰 상황이다.
이때 부모 요소인 outer의 너비와 넓이를 알아보려고 한다.

방법

1. HTMLElement.offsetWidth / offsetHeight

css값까지 다 포함해서 눈에 보이는 요소만큼 값을 정수로 출력한다.
만약 div가 display:none 상태라면 width값을 0으로 출력한다.
위의 예제에서는 400*400에 padding이 10px border가 2px로 들어가 있으나 우리 눈에 보이는 전체를 나타낸다.

그래서 총 400 / 400 이 찍힌다.

2. HTMLElement.clientWidth / clientHeight

border, scroll은 제외하고 padding까지만 포함해서 알고싶다면 사용한다.
예를들어 아래의 것에서는 초록색으로 칠해진 부분만 해당된다.

3. HTMLElement.scrollWidth / scrollHeight

사실 이걸 알기위해 알아 보았던 것이다!
자식이 부모요소 보다 긴데 부모요소가 400px 400px으로 제한해서(overflow로) 자식이 그만큼만 보이는 상태인데 자식의 총길이를 알고싶을 때 사용하면 된다.

그래서 위에서 결과같이
383 * 820 이 나오게 된 것이다!

주의해야할 게 있는데
위의 예제에서

#outer 의 높이는 400px , padding은 10px
#inner 의 높이는 800x 

이때 합산 결과는
inner의 높이 800 + outer의 패딩 위아래 20 = 820px 이 된다.