js获取控件坐标

最新推荐文章于 2014-04-08 09:24:36 发布

原创最新推荐文章于 2014-04-08 09:24:36 发布 · 363 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

本文介绍了一种使用JavaScript获取页面元素绝对位置的方法，并演示了如何根据这些位置信息来动态显示和隐藏一个DIV元素。通过具体实例，展示了getElementPos函数如何递归地累加偏移量以确定元素坐标，并利用这些坐标调整DIV的位置。

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