javascript设置div坐标并使其由隐藏变为显示

上代码：
<head runat="server">
    <title>问题</title>
    <style type="text/css">
        #div1
        {
            background: #A2B5CD;
            height: 100px;
            width: 150px;
        }
    </style>    <script language="javascript" type="text/javascript">
        function ShowDiv() {
            var leftdis = document.getElementById("textbox1").offsetLeft;
            var topdis = document.getElementById("textbox1").offsetTop;          
            var _div = document.getElementById("div1");
            var setleft = _div.style.left;
            var settop = _div.style.top;
            setleft = leftdis + "px";
            settop = (topdis + 60) + "px";
            alert(settop);//测试作用            document.getElementById("div1").style.display = "block";
        }
        function HiddDiv() {
            document.getElementById("div1").style.display= "none";
        }    </script></head>
<body>
    <form id="form1" runat="server">
    
    <asp:TextBox ID="textbox1" runat="server" onfocus="ShowDiv()" onblur="HiddDiv()" />
       <div id="div1"style=" display:none  ">
        ABCDEFG</div>
    </form>
</body>
</html>

解决方案 »

  1.   

    目的是把div层设置与textbox上下相离60px，但运行不对啊 ！！！请问 哪里出错了？
      

  2.   

    function ShowDiv() {
      var leftdis = document.getElementById("textbox1").offsetLeft;
      var topdis = document.getElementById("textbox1").offsetTop;   
      var _div = document.getElementById("div1");
      var setleft = _div.style.left;
      var settop = _div.style.top;
      setleft = leftdis + "px";
      settop = (topdis + 60) + "px";
      alert(settop);//测试作用你这里能输出正确结果？
      document.getElementById("div1").style.display = "block";
      }
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>问题</title>
        <style type="text/css">
            #div1
            {
                background: #A2B5CD;
                height: 100px;
                width: 150px;
                 
            }
        </style>
        <script language="javascript" type="text/javascript">
            function ShowDiv() {
                var leftdis = document.getElementById("textbox1").offsetLeft;
                var topdis = document.getElementById("textbox1").offsetTop;
                var _div = document.getElementById("div1");
                //var setleft = _div.style.marginLeft;
                //var settop = _div.style.marginTop;
                    
               // setleft = leftdis + "px";
                //settop = (topdis + 60) + "px";
                //alert(settop); //测试作用
                _div.style.marginTop = (topdis + 60) + "px";
                document.getElementById("div1").style.display = "block";
            }
            function HiddDiv() {
                document.getElementById("div1").style.display = "none";
            }    </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <input type='text' id="textbox1"  onfocus="ShowDiv()" onblur="HiddDiv()" style=' position:relative;' />
        <div id="div1" style="display: none">
            ABCDEFG</div>
        </form>
    </body>
    </html>
      

  4.   

    你是要给他赋值。。
    var setleft = _div.style.marginLeft;
    setleft = leftdis + "px";
    你这样只是把变量的值改变了。。本质功能并没有实现。。