HTML DOM clientHeight 속성 완벽 정리 – 요소의 실제 표시 높이 구하기

HTML DOM의 clientHeight 속성은 HTML 요소의 화면에 보이는 높이(viewable height)를 가져오는 데 사용됩니다. 이 높이에는 패딩(padding)은 포함되지만, 테두리(border), 스크롤바, 마진(margin)은 제외됩니다. 또한 콘텐츠가 요소를 넘쳐 흐르더라도 오직 해당 요소 자체의 높이만 반환합니다.

clientHeight 계산 방식

clientHeight 값은 다음과 같이 계산할 수 있습니다.

CSS height + CSS padding − border − scrollbar(수평) − margin

문법(Syntax)

clientHeight 속성의 기본 문법은 다음과 같습니다.

element.clientHeight

예제 코드

HTML DOM clientHeight 속성을 활용한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
#styleDIV {
    height: 250px;
    padding: 10px;
    margin: 15px;
    border: 2px solid blue;
    background-color: lightgreen;
    text-align:center;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 패딩을 포함한 div의 높이를 확인할 수 있습니다.</p>
<button onclick="heightDiv()">높이 가져오기</button>
<div id="styleDIV">
<b>샘플 div</b>
</div>
<p id="Sample"></p>
<script>
    function heightDiv() {
        var x = document.getElementById("styleDIV");
        var txt = "패딩을 포함한 높이 = " + x.clientHeight ;
        document.getElementById("Sample").innerHTML = txt;
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM clientHeight 속성 완벽 정리 – 요소의 실제 표시 높이 구하기

'높이 가져오기' 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.

HTML DOM clientHeight 속성 완벽 정리 – 요소의 실제 표시 높이 구하기

예제 코드 상세 설명

위 예제에서 수행된 작업을 단계별로 살펴보겠습니다.

1. 스타일이 적용된 div 생성

먼저 id가 "styleDIV"인 div 요소를 만들고, 해당 id 선택자를 통해 스타일을 적용했습니다.

#styleDIV {
    height: 250px;
    padding: 10px;
    margin: 15px;
    border: 2px solid blue;
    background-color: lightgreen;
    text-align:center;
}
<div id="styleDIV">
<b>샘플 div</b>
</div>

2. 버튼 클릭 시 함수 실행

그다음 '높이 가져오기' 버튼을 생성하여, 클릭 시 heightDiv() 메서드가 실행되도록 설정했습니다.

<button onclick="heightDiv()">높이 가져오기</button>

3. clientHeight로 높이 가져오기

heightDiv() 함수는 getElementById() 메서드를 사용해 <div> 요소를 가져와 변수 x에 할당합니다. 이후 <div>에 clientHeight 속성을 적용해 높이 값을 얻고, 안내 문구를 붙여 변수 txt에 저장합니다. 마지막으로 innerHTML 속성을 통해 해당 텍스트를 <p> 태그 안에 출력합니다.

function heightDiv() {
    var x = document.getElementById("styleDIV");
    var txt = "패딩을 포함한 높이 = " + x.clientHeight ;
    document.getElementById("Sample").innerHTML = txt;
}

정리

clientHeight 속성은 패딩은 포함하지만 테두리, 스크롤바, 마진은 제외한 요소의 실제 표시 높이를 반환합니다. 참고로 유사한 속성으로 offsetHeight(패딩·테두리 포함)와 scrollHeight(스크롤 영역 전체 높이 포함)가 있으므로, 용도에 맞게 적절히 활용하는 것이 좋습니다.