<HTML>
<HEAD>
<TITLE> 화면상의 객체 위치,크기 </TITLE>
<SCRIPT LANGUAGE="JavaScript" >
<!--
function getBounds(tag)
{
var ret = new Object();
if(document.all) {
var rect = tag.getBoundingClientRect();
ret.left = rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft);
ret.top = rect.top + (document.documentElement.scrollTop || document.body.scrollTop);
ret.width = rect.right - rect.left;
ret.height = rect.bottom - rect.top;
} else {
var box = document.getBoxObjectFor(tag);
ret.left = box.x;
ret.top = box.y;
ret.width = box.width;
ret.height = box.height;
}
return ret;
}
<HEAD>
<TITLE> 화면상의 객체 위치,크기 </TITLE>
<SCRIPT LANGUAGE="JavaScript" >
<!--
function getBounds(tag)
{
var ret = new Object();
if(document.all) {
var rect = tag.getBoundingClientRect();
ret.left = rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft);
ret.top = rect.top + (document.documentElement.scrollTop || document.body.scrollTop);
ret.width = rect.right - rect.left;
ret.height = rect.bottom - rect.top;
} else {
var box = document.getBoxObjectFor(tag);
ret.left = box.x;
ret.top = box.y;
ret.width = box.width;
ret.height = box.height;
}
return ret;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<BR><BR><BR><BR><BR>
<span id="youranytag" style="border:1px solid ;width:500px;">aa</span>
<SCRIPT LANGUAGE="JavaScript">
<!--
var box = getBounds(document.getElementById('youranytag'));
var str = "left:"+box.left+"/top:"+box.top+"/width:"+box.width+"/height:"+box.height;
alert(str);
//-->
</SCRIPT>
</BODY>
</HTML>
출처 : http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=59355&page=6
참조 : http://koxo.com/lang/js/method/getBoundingClientRect.html