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> 결과보기
<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>
결과보기