zoukankan      html  css  js  c++  java

  • 根据控件坐标显示div

    1. <HTML>   
    2.  <BODY>   
    3.  <div id="mydiv" style="position:absolute; display:none; background:#FF9933; height:80;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>  
  • 相关阅读:
    面试问题之C++语言：C++中指针和引用的区别
    手撕代码：最长回文子串
    手撕代码：求字符串最长回文子序列
    手撕代码：用宏来实现获取数组的大小
    手撕代码之线程：thread类简单使用
    面试问题之计算机网络：OSI七层网络模型及相关协议
    C++各种输入
    C printf格式化输出
    记一次mac 安装MySQL-python 的惨痛经历
    记一次tomcat程序运行慢的处理过程
  • 原文地址：https://www.cnblogs.com/myssh/p/1438294.html
Copyright © 2011-2022 走看看