JavaScript에서 div 요소의 높이 가져 오기

브라우저 JavaScript에서 <div> 요소의 높이를 구하려면 먼저 요소를 선택한 다음 필요한 측정값을 읽으세요. 내부 상자 높이는 clientHeight, 테두리를 포함한 높이는 offsetHeight, 넘친 부분까지 포함한 전체 콘텐츠 높이는 scrollHeight, 렌더링된 사각형의 높이는 getBoundingClientRect().height를 사용합니다. 각 속성이 요소의 서로 다른 부분을 측정하므로 값이 다를 수 있습니다.

아래 실행 가능한 예제는 콘텐츠 영역이 50px이고 패딩이 각 면에서 4px, 테두리가 1px인 상자를 모델링합니다. 브라우저 DOM 없이 Node에서 실행해 각 측정값을 출력합니다. 코드 블록의 출력 레이블은 바이트 단위로 보존되어 영어로 표시됩니다. 브라우저에서는 선택한 DOM 요소에서 같은 속성을 읽으면 됩니다.

const element = {
  contentHeight: 50,
  padding: 4,
  border: 1,
  get clientHeight() {
    return this.contentHeight + 2 * this.padding;
  },
  get offsetHeight() {
    return this.clientHeight + 2 * this.border;
  },
  get scrollHeight() {
    return this.clientHeight;
  },
  getBoundingClientRect() {
    return { height: this.offsetHeight };
  }
};

console.log('clientHeight:', element.clientHeight);
console.log('offsetHeight:', element.offsetHeight);
console.log('scrollHeight:', element.scrollHeight);
console.log('bounding height:', element.getBoundingClientRect().height);

clientHeight: 58
offsetHeight: 60
scrollHeight: 58
bounding height: 60

JavaScript에서 div 높이 측정하기

DOM에서 ID로 기존 요소를 선택한 뒤 아래 측정 방법 중 하나를 사용하세요. 위의 Node 예제는 설명한 상자의 측정값을 모델링합니다. 실제 페이지를 측정할 때는 element를 document.getElementById('container') 또는 다른 선택자의 결과로 바꾸세요. 요소가 문서에 추가되고 레이아웃을 계산할 수 있는 상태가 된 뒤 크기를 읽어야 합니다.

필요한 상자 범위에 따라 측정 방법을 고르세요. 내부 상자는 clientHeight, 테두리까지 결과에 포함하려면 offsetHeight, 스크롤할 전체 콘텐츠 높이가 필요하면 scrollHeight, 렌더링된 사각형이 중요하면 getBoundingClientRect().height를 사용합니다. 이 값에는 어느 것도 여백이 포함되지 않으므로, 간격까지 계산해야 한다면 해당 레이아웃 간격을 별도로 측정하세요. 값의 단위는 물리적인 화면 픽셀이 아니라 CSS 픽셀입니다.

clientHeight

clientHeight는 CSS 픽셀 단위의 내부 높이입니다. 위쪽과 아래쪽 패딩은 포함하지만 테두리와 여백은 제외합니다. 예제의 콘텐츠 높이 50px에 양쪽 세로 패딩 4px씩을 더하면 값은 58입니다. 이 속성은 정수를 반환합니다.

offsetHeight

offsetHeight는 요소의 콘텐츠, 패딩, 테두리와 가로 스크롤 막대가 있다면 그 막대까지 포함합니다. 여백은 제외합니다. 예제에서는 50 + 8 + 2 = 60px입니다. 이 속성도 정수를 반환합니다.

scrollHeight

scrollHeight는 넘치는 콘텐츠가 있을 때 보이는 영역 밖으로 이어지는 부분까지 포함해 콘텐츠의 전체 높이를 측정합니다. 패딩은 포함하지만 테두리와 여백은 제외합니다. 예제에서는 콘텐츠가 넘치지 않으므로 값이 58입니다. 콘텐츠가 넘치는 페이지에서는 clientHeight보다 큰 값이 될 수 있습니다. 정수 측정값이며, 모든 레이아웃에서 clientHeight와 같다고 가정해서는 안 됩니다.

getBoundingClientRect()

getBoundingClientRect()는 뷰포트를 기준으로 요소가 렌더링된 크기와 위치를 나타내는 사각형을 반환합니다. 렌더링된 높이를 읽으려면 height 속성을 사용하세요. 패딩과 테두리를 포함하므로 예제의 값은 60px입니다. 앞의 정수 크기 속성과 달리 이 높이는 레이아웃이나 변환으로 서브픽셀 크기가 생길 때 소수일 수 있습니다. 콘텐츠의 스크롤 가능 높이보다 렌더링된 사각형이 필요할 때 이 방법을 사용하세요.