HTML DOM 클라이언트 높이 속성

<시간/>

HTML DOM clientHeight 속성은 HTML 요소의 볼 수 있는 높이를 가져오는 데 사용됩니다. 이 높이는 패딩을 포함하지만 테두리, 스크롤 막대 및 여백은 제외합니다. 요소에서 콘텐츠가 오버플로되더라도 요소의 높이만 반환합니다.

다음과 같이 계산할 수 있습니다. -

CSS height+ CSS padding – border –scrollbar(horizontal) – margins

구문

다음은 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>Click the below button to get the height of the div, including padding.</p>
<button onclick="heightDiv()">GET HEIGHT</button>
<div id="styleDIV">
<b>A sample div</b>
</div>
<p id="Sample"></p>
<script>
   function heightDiv() {
      var x = document.getElementById("styleDIV");
      var txt = "Height including padding = " + x.clientHeight ;
      document.getElementById("Sample").innerHTML = txt;
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 클라이언트 높이 속성

GET HEIGHT 버튼 클릭 시 -

HTML DOM 클라이언트 높이 속성

위의 예에서 -

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>A sample div</b>
</div>

그런 다음 클릭 시 heightDiv() 메서드를 실행하는 GET HEIGHT 버튼을 만들었습니다. −

<button onclick="heightDiv()">GET HEIGHT</button>

heightDiv()는 getElementById() 메서드를 사용하여

요소를 가져와 변수 x에 할당합니다. 그런 다음

의 clientHeight 속성을 사용하여 높이를 얻고 일부 텍스트를 추가한 후 변수 txt에 할당합니다. 그런 다음 txt 안의 텍스트는 단락의 innerHTML 속성을 사용하고 txt 변수를 할당하여 단락 내부에 표시됩니다. -

function heightDiv() {
   var x = document.getElementById("styleDIV");
   var txt = "Height including padding = " + x.clientHeight ;
   document.getElementById("Sample").innerHTML = txt;
}