[DOM_Element] JS - clientTop 속성 - 요소위쪽테두리너비 (= 요소상단테두리너비)

clientTop 예제

 

<style>

#box {

  height: 200px;

  width: 200px;

  padding: 10px;

  margin: 15px;

  border-top: 30px solid blue;

  border-left: 50px solid red;

  background-color: yellow;

}

</style>

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

<div id="box">

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

</div>

<script>

function homzzang() {

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

  var ct = box.clientTop;

  var cl = box.clientLeft;

  var txt = "상단 border 너비: " + ct + "px<br>";

  txt += "좌측 border 너비: " + cl + "px";

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

}

</script>

 

결과보기