[DOM_Element] JS - offsetWidth 속성 ★ = 가시너비 (= 요소실제너비 = 요소너비 width + padding + border = offsetWidth속성 = 오프셋위드스속성)

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