zoukankan      html  css  js  c++  java
  • offset获取位置

     1 <!DOCTYPE HTML>
     2 <html>
     3     <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5     <title>ll无标题文档</title>
     6     <style>
     7     div{padding:40px 50px;}
     8         #div1{background:red;position:relative;}
     9         #div2{background:green;position:relative;}
    10         #div3{background:orange;position:relative;}
    11     </style>
    12      <script>
    13      window.onload=function(){
    14      var oDiv3=document.getElementById('div3');
    15      //alert(oDiv3.offsetLeft);
    16      /*var obj=oDiv3;
    17      while(obj){
    18         alert(obj.id+':'+obj.offsetTop);
    19         var iTop=0;
    20         iTop+=obj.offsetTop;
    21         obj=obj.offsetParent;
    22         alert(obj+':'+obj.id);
    23      
    24      }
    25      alert(iTOP);*/
    26      var p=getPos(oDiv3);
    27      alert(p.top);    
    28      function getPos(obj){
    29             var pos={left:0, top:0}
    30             while(obj)
    31             {
    32                 pos.left+=obj.offsetLeft;
    33                 pos.top+=obj.offsetTop;
    34                 obj=obj.offsetParent;
    35             }
    36             return pos;
    37         }
    38      
    39      
    40      
    41      
    42       };
    43      
    44      </script>
    45     
    46     </head>
    47 
    48 <body id="body1">
    49     <div id="div1">
    50         <div id="div2">
    51             <div id="div3"></div>
    52         </div>
    53     
    54     
    55     </div>
    56     
    57          
    58     
    59 </body>
    60 </html>
  • 相关阅读:
    leetcode 851. Loud and Rich
    674. 最长连续递增序列
    896. 单调数列
    905. 按奇偶排序数组
    917. 仅仅反转字母
    922. 按奇偶排序数组 II
    925. 长按键入
    929. 独特的电子邮件地址
    933. 最近的请求次数
    自己动手丰衣足食写java贪吃蛇
  • 原文地址:https://www.cnblogs.com/hduhdc/p/5292463.html
Copyright © 2011-2022 走看看