[DOM_Element] JS - clientHeight 속성 - 요소높이 (= 요소가시높이) (padding 포함 / border, scrollbar, margin 제외)

clientHeight 예제 

 

<style>

#box {

  height: 200px;

  width: 400px;

  padding: 30px;

  margin: 20px;

  border: 10px solid red;

  background-color: yellow;

}

</style>

<button onclick="homzzang()">클릭</button>

<div id="box">

  <b>박스 정보</b><br>

  Height: 200px<br>

  Width: 400px<br>

  padding: 30px<br>

  margin: 20px<br>

  border: 10px<br>

  <p id="demo">홈짱닷컴 Homzzang.com</p>

</div>

<script>

function homzzang() {

  var box = document.getElementById("box");

  var ch = box.clientHeight;

  var cw = box.clientWidth;

  var txt = "padding 포함 높이: " + ch + "px<br>";

  txt += "padding 포함 너비: " + cw + "px";

  document.getElementById("demo").innerHTML = txt;

}

</script>

 

결과보기