[코딩애플] 요소의 높이와 위치값 구하기 (clientHeight, offsetHeight, scrollHeight, getBoundingClientRect())

clientHeight

console.log(element.clientHeight);

clientHeight는 패딩을 포함한 요소의 높이를 가져온다.

offsetHeight

console.log(element.offsetHeight);

clientHeight는 패딩, 테두리, 가로스크롤바(있는 경우)을 포함한 요소의 높이를 가져온다.

scrollHeight

console.log(element.scrollHeight);

scrollHeight는 패딩, overflow로 인해 화면에 표시되지 않은 컨텐츠을 포함한 요소의 높이를 가져온다.

---

getBoundingClientRect()

console.log(element.getBoundingClientRect());

// 출력결과
{
  top: 134
  y: 134 //top과 동일
  bottom: 178
  left: 212.5
  x: 212.5 //left와 동일
  right: 1092.5
  width: 880
  height: 44
}

getBoundingClientRect() 메소드는 윈도우를 기준으로 한 요소의 위치/너비/높이를 가져온다.

---

문서 전체의 높이 구하기

let scrollHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
  );

---

출처 : 코딩애플 https://codingapple.com/ / MDN https://developer.mozilla.org/ko/