HTML DOM offsetHeight 속성

HTML DOM Element 객체

offsetHeight읽기 전용 속성으로 요소의 높이를 정수로 반환하며, 수직 패딩과 테두리를 포함합니다.

일반적으로 offsetHeight는 요소의 CSS 높이의 픽셀 계산을 포함하며, 테두리, 패딩 및 수평 스크롤바(만약 있을 경우)를 포함합니다. 이는 가상 요소의 높이를 포함하지 않습니다. 예를 들어,::before또는::after。

이 속성을 이해하기 위해서는CSS Box Model。

을 사용하여clientHeight와clientWidth이 속성은 요소의 보이는 높이와 폭을 반환하며, 패딩을 포함하지만, 테두리, 마진 및 스크롤바(만약 있을 경우)를 포함하지 않습니다.

문법:

element.offsetHeight

var elem = document.querySelector("div");
var txt = "높이 포함 padding"　+border: ""　+　elem.offsetHeight　+　"px<br>";
txt　+= "폭 포함 padding"　+　border: ""　+　elem.offsetWidth　+　"px";

브라우저 호환성

모든 브라우저에서 offsetHeight 속성을 완전히 지원합니다:

기술 세부 사항

더 많은 예제

이 예제는 clientHeight와 offsetHeight 간의 차이를 보여줍니다:

var elem = document.querySelector("div");
var txt = "Height 포함 padding: "　+　elem.clientHeight　+　"px<br>";
txt　+= "Height" 포함 "padding"　+　border: ""　+　elem.offsetHeight　+　"px";

관련 참조

HTML DOM 참조:offsetWidth 속성

HTML DOM 참조:offsetLeft 속성

HTML DOM 참조:offsetTop 속성

HTML DOM 참조:offsetParent 속성

HTML DOM Element 객체