[DOM_Element] JS - offsetHeight 속성 - 가시높이 (= 요소실제높이 = 요소높이 height+ + padding + border)

1. offsetHeight 예제 - 가시 높이
2. offsetWidth 예제 - 가시 너비

offsetHeight 예제 - 가시 높이

 

<style>

#hz {

  height: 250px;

  width: 400px;

  padding: 10px;

  margin: 15px;

  border: 5px solid red;

  background-color: yellow;

}

</style>

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

<div id="hz">

  <h1>홈짱닷컴 Homzzang.com</h1>

  Height: 250px<br>

  Width: 400px<br>

  padding: 10px<br>

  margin: 15px<br>

  border: 5px<br>  

</div>

<p id="demo"></p>

<script>

function homzzang() {

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

  var txt = "offsetHeight = height + padding + border = " + box.offsetHeight + "px<br>";

  txt += "offsetWidth = width + padding + border : " + box.offsetWidth + "px";

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

}

</script>

 

결과보기

offsetWidth 예제 - 가시 너비

 

<style>

#hz {

  height: 250px;

  width: 400px;

  padding: 10px;

  margin: 15px;

  border: 5px solid red;

  background-color: yellow;

}

</style>

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

<div id="hz">

  <h1>홈짱닷컴 Homzzang.com</h1>

  Height: 250px<br>

  Width: 400px<br>

  padding: 10px<br>

  margin: 15px<br>

  border: 5px<br>  

</div>

<p id="demo"></p>

<script>

function homzzang() {

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

  var txt = "offsetHeight = height + padding + border = " + box.offsetHeight + "px<br>";

  txt += "offsetWidth = width + padding + border : " + box.offsetWidth + "px";

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

}

</script>

 

결과보기

• offsetHeight = height + padding + border = 280px
• offsetWidth = width + padding + border : 430px