根据控件坐标显示div

  1. <HTML>   
  2.  <BODY>   
  3.  <div id="mydiv" style="position:absolute; display:none; background:#FF9933; height:80;width:120;"> I am div ^_^</div>   
  4.  点击showDiv按钮在文本框下面出现一个DIV<br>   
  5.  <table border=1>   
  6.     <tr>   
  7.         <td>   
  8.             <table border=1>   
  9.                 <tr>   
  10.                     <td>aa</td>   
  11.                     <td>   
  12.                         <input type="text" id="test">   
  13.                         <button onclick="showDiv()">showDiv</button>   
  14.                     </td>   
  15.                 </tr>   
  16.             </table>   
  17.         </td>   
  18.     </tr>   
  19.   </table>   
  20.   
  21.   <SCRIPT LANGUAGE="JavaScript">   
  22.   <!--   
  23. //得到某一元素的绝对位置,不管该元素嵌套在多复杂的位置里   
  24. function getElementPos(obj)   
  25. {   
  26.     var left = 0;   
  27.     var top = 0;   
  28.   
  29.     if(obj.x)   
  30.     {   
  31.         left= obj.x;   
  32.         top = obj.y;   
  33.     }else if(obj.offsetParent)   
  34.     {      
  35.         while(obj.offsetParent)   
  36.         {          
  37.             left += obj.offsetLeft;   
  38.             top  += obj.offsetTop;   
  39.             obj = obj.offsetParent;   
  40.         }    
  41.     }   
  42.   
  43.     return [left,top];//封装在一个数组里   
  44. }   
  45. function showDiv()   
  46. {   
  47.     var mydiv = document.getElementById("mydiv");   
  48.     var pos = getElementPos(document.getElementById("test"));   
  49.     mydiv.style.display = "";   
  50.   
  51.     mydiv.style.left = pos[0];   
  52.     mydiv.style.top = pos[1] + document.getElementById("test").offsetHeight;   
  53. }   
  54.   //-->   
  55.   </SCRIPT>   
  56.  </BODY>   
  57. </HTML>  
posted on   ToKens  阅读(629)  评论(0)    收藏  举报
努力加载评论中...

Powered by: 博客园 Copyright © 2025 ToKens
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示