HTML DOM offsetHeight 속성이란?
HTML DOM의 offsetHeight 속성은 특정 요소의 전체 높이를 숫자 값으로 반환합니다. 이 값에는 요소의 패딩(padding), 테두리(border), 그리고 스크롤바가 모두 포함되지만, 마진(margin)은 계산에서 제외됩니다.
즉, 화면에서 해당 요소가 실제로 차지하는 세로 크기를 확인해야 할 때 유용하게 활용할 수 있습니다.
구문
아래와 같이 작성하며, 숫자 값이 반환됩니다.
HTMLelement.offsetHeight
반환값은 정수 형태이며 픽셀(px)을 기준으로 하지만, 문자열에 'px' 같은 단위가 붙지 않고 숫자만 반환된다는 점에 유의해야 합니다.
예제
다음은 HTML DOM offsetHeight 속성을 활용한 예제입니다. 이미지와 컨테이너 div의 높이를 확인하고, 버튼 클릭 시 컨테이너 크기를 이미지에 맞춰 스크롤바를 제거하는 기능까지 함께 구현했습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetHeight</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#containerDiv {
margin: 0 auto;
height: 100px;
width: 100px;
overflow: auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-offsetHeight</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/db2/images/db2-mini-logo.jpg">
</div>
<input type="button" onclick="getHeight()" value="Get height of picture">
<input type="button" onclick="fitHeight()" value="Remove Scrollbars">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var imgSelect = document.getElementById("image");
var containerDiv = document.getElementById("containerDiv");
function getHeight() {
divDisplay.innerHTML = 'Height of above picture with padding & border: '+imgSelect.offsetHeight;
divDisplay.innerHTML += '<br>Height of container with padding & border: '+containerDiv.offsetHeight;
}
function fitHeight() {
containerDiv.style.height = imgSelect.height+'px';
containerDiv.style.width = imgSelect.width+'px';
containerDiv.style.overflow = 'hidden';
getHeight();
}
</script></body></html>
실행 결과
버튼을 클릭하기 전 −
'Get height of picture' 버튼을 클릭한 후 − 이미지와 컨테이너의 높이(패딩 및 테두리 포함)가 화면에 표시됩니다.
'Remove Scrollbars' 버튼을 클릭한 후 − 컨테이너의 크기가 이미지에 맞게 조정되어 스크롤바가 사라집니다.
offsetHeight와 유사한 속성 비교
높이를 다룰 때 offsetHeight와 함께 자주 언급되는 속성들을 비교하면 다음과 같습니다.
- clientHeight: 패딩은 포함하지만 테두리와 스크롤바는 제외한 높이를 반환합니다.
- scrollHeight: 스크롤로 가려진 영역까지 포함한 전체 콘텐츠 높이를 반환합니다.
- offsetWidth: offsetHeight와 동일한 계산 방식으로 가로 크기를 반환합니다.
또한 offsetHeight는 읽기 전용(read-only) 속성이므로 직접 값을 할당할 수 없습니다. 요소의 높이를 변경하려면 CSS의 height 속성이나 JavaScript의 style 객체를 사용해야 합니다.