鼠标点击组件相应的div显示问题

document.getElementById("ly1").style.display="block";document.getElementById("ly1").style.top = 537 +"px";
document.getElementById("ly1").style.left = 537 +"px";先让它显示出来然后在设置位置

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="lap1983">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script language="javascript">
function ControlDiv(obj)
{
var lblLyl = document.getElementById("ly1");
alert(obj.offsetTop);
lblLyl.style.left = obj.clientLeft + obj.clientWidth + 10;
lblLyl.style.top = obj.offsetTop;
lblLyl.style.display = "";
lblLyl.style.visibility = "";
}
  </script>
</HEAD> <BODY>
  <div id="ly1" style="position:absolute; width:600px; left: -100px; display:none;top:17px; visibility: hidden; overflow: hidden;">
<table width="400"border="0"><tr><td>xxxxxxxxxxxxx</td></tr></table>
</div><input type="text" onclick="ControlDiv(this);" /> <br><br>
<input type="text" onclick="ControlDiv(this);"/><br><br>
<input type="text" onclick="ControlDiv(this);"/>
</BODY>
</HTML>
感谢楼上的，原来是用clientLeft这些参数。。另外现在这个div是写在页面上的，我想点击的时候动态输出怎么做？
用XMLHttp向后台请求数据，然后返回时用JavaScript写进DIV的innerHTML中
现在又发现问题了是offsetTop是这个属性，如果那三个文本框是在一个表格里，并且上面还有一个表格的话布局就有问题了。。如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="lap1983">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function ControlDiv(obj)
{
var lblLyl = document.getElementById("ly1");
alert(obj.offsetTop);
lblLyl.style.left = obj.clientLeft + obj.clientWidth + 10;
lblLyl.style.top = obj.offsetTop;
lblLyl.style.display = "";
lblLyl.style.visibility = "";
}
</script>
</HEAD><BODY>
<div id="ly1" style="position:absolute; width:600px; left: -100px; display:none;top:17px; visibility: hidden; overflow: hidden;">
<table width="400"border="0"><tr><td>xxxxxxxxxxxxx</td></tr></table>
</div>
<table width="200" border="1">
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>
<table><tr><td>
<input type="text" onclick="ControlDiv(this);" /> <br><br>
<input type="text" onclick="ControlDiv(this);"/><br><br>
<input type="text" onclick="ControlDiv(this);"/>
</td></tr></table></BODY>
</HTML>offsetTop应该是组件在容器里的相对高度吧有没有相对于整个页面的高度的
搞定了如何取得组件的绝对位置如下所示：
  function GetAbsoluteLocationEx(element)
{
    if ( arguments.length != 1 || element == null )
    {
        return null;
    }
    var elmt = element;
    var offsetTop = elmt.offsetTop;
    var offsetLeft = elmt.offsetLeft;
    var offsetWidth = elmt.offsetWidth;
    var offsetHeight = elmt.offsetHeight;
    while( elmt = elmt.offsetParent )
    {
          // add this judge
        if ( elmt.style.position == 'absolute' || elmt.style.position == 'relative'
            || ( elmt.style.overflow != 'visible' && elmt.style.overflow != '' ) )
        {
            break;
        }
        offsetTop += elmt.offsetTop;
        offsetLeft += elmt.offsetLeft;
    }
    return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
        offsetWidth: offsetWidth, offsetHeight: offsetHeight };
}