HTML DOM Element offsetHeight 속성

정의 및 사용법

offsetHeight 속성은 요소의 시각적 높이를 픽셀 단위로 반환합니다. 패딩, 경계선 및 스크롤바를 포함하며, 마진을 제외합니다.

offsetHeight 속성은 읽기 전용입니다.

다른 내용을 참조하세요：CSS 프레임워크 튜토리얼

offsetParent

모든 블록 요소는 오프셋 부모에 대한 오프셋 값을 보고합니다：

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

오프셋 부모는 가장 가까운 비정적 위치를 가진 조상입니다.

존재하지 않는 오프셋 부모가 없으면 오프셋은 문서 본문에 대한 상대적입니다.

다른 내용을 참조하세요：

offsetWidth 속성

offsetParent 속성

offsetTop 속성

offsetLeft 속성

clientTop 속성

clientLeft 속성

clientWidth 속성

clientHeight 속성

인스턴스

예제 1

내부 패딩 및 경계선을 포함한 "myDIV"의 높이와 너비를 표시합니다：

const elmnt = document.getElementById("myDIV");
let text = "높이와 패딩 및 경계선: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

직접 시도해 보세요

예제 2

clientHeight/clientWidth와 offsetHeight/offsetWidth의 차이

스크롤바 있음:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

직접 시도해 보세요

스크롤바 없음:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

직접 시도해 보세요

문법

element.offsetHeight

반환 값

형식 설명
숫자 요소의 시각적 높이(픽셀로 측정), 내간격, 경계선 및 스크롤바를 포함합니다.

브라우저 지원

모든 브라우저가 지원합니다 element.offsetHeight：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
지원 지원 지원 지원 지원 지원