js获取控件坐标

zhanwc

浏览: 406239 次
性别:
来自: 重庆

最近访客更多访客>>

guoyunsky

huqiao1220

wjywjy

317422638

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript HTML

<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>

分享到：