js获取控件座标
日期：2014-05-16 浏览次数：20369 次
?<HTML>
<BODY>
<div id="mydiv" style="position:absolute; display:none; background:#FF9933; height:80;width:120;"> I am div ^_^ <button onclick="sss()">showDiv</button> </div>
点击showDiv按钮在文本框下面出现一个DIV<br>
<table border=1>
<tr>
<td>
<table border=1>
<tr>
<td>aa</td>
<td>
<input type="text" id="test">
<button onclick="showDiv()">showDiv</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
//得到某一元素的绝对位置,不管该元素嵌套在多复杂的位置里
function getElementPos(obj)
{
var left = 0;
var top = 0;
if(obj.x)
{
left= obj.x;
top = obj.y;
}else if(obj.offsetParent)
{
while(obj.offsetParent)
{
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}
}
return [left,top];//封装在一个数组里
}
function showDiv()
{
var mydiv = document.getElementById("mydiv");
var pos = getElementPos(document.getElementById("test"));
mydiv.style.display = "";
mydiv.style.left = pos[0];
mydiv.style.top = pos[1] + document.getElementById("test").offsetHeight;
}
function sss()
{
var mydiv = document.getElementById("mydiv");
var pos = getElementPos(document.getElementById("test"));
mydiv.style.display = "none";
}
//-->
</SCRIPT>
</BODY>
</HTML>
?
