getBoundingClientRect() 예제
<style> .out {height:200px; width:300px; overflow:auto;} #hz {width:250px; height:150px; border:1px solid red;} .in {width:750px ; height:1000px; background:yellow;} </style> <script> function homzzang() { var div = document.getElementById("hz"); var box = div.getBoundingClientRect(); x = box.left; y = box.top; w = box.width; h = box.height; var res = "Left: " + x + ", Top: " + y + ", Width: " + w + ", Height: " + h; alert (res); } </script> <div class="out"> <div id="hz">홈짱닷컴 Homzzang.com</div> <div class="in"></div> </div> <button onclick="homzzang()">클릭</button> 결과보기
<style>
.out {height:200px; width:300px; overflow:auto;}
#hz {width:250px; height:150px; border:1px solid red;}
.in {width:750px ; height:1000px; background:yellow;}
</style>
<script>
function homzzang() {
var div = document.getElementById("hz");
var box = div.getBoundingClientRect();
x = box.left;
y = box.top;
w = box.width;
h = box.height;
var res = "Left: " + x + ", Top: " + y + ", Width: " + w + ", Height: " + h;
alert (res);
}
</script>
<div class="out">
<div id="hz">홈짱닷컴 Homzzang.com</div>
<div class="in"></div>
</div>
<button onclick="homzzang()">클릭</button>
결과보기
결과값: Left: 8, Top: 8, Width: 260, Height: 160