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