zoukankan      html  css  js  c++  java
  • .offsetLeft,.offsetTop

    *{ margin:0; padding:0}
    div {padding: 40px 50px;}
    #div1 {background: red;}
    #div2 {background: green; }
    #div3 {background: orange;}
    
    <div id="div1">
      <div id="div2">
        <div id="div3"></div>
      </div>
    </div>
    
    <script> 
    window.onload = function() {
    var oDiv3 = document.getElementById('div3');
        alert( oDiv3.offsetTop );
    }
    </script>
    
    
    offsetTop 
    div3无定位父级则显示为到body的距离
    火狐,谷歌,360,opera:80
    ie7-11:80

    offsetLeft

    div3无定位父级则显示为到body的距离
    火狐,谷歌,360,opera:100
    ie7-11:100
     
    *{ margin:0; padding:0}
    div {padding: 40px 50px;}
    #div1 {background: red;}
    #div2 {background: green;position:relative }
    #div3 {background: orange;}
    
    <div id="div1">
      <div id="div2">
        <div id="div3"></div>
      </div>
    </div>
    
    <script> 
    window.onload = function() {
    var oDiv3 = document.getElementById('div3');
        alert( oDiv3.offsetTop );
    }
    </script>
    offsetTop
    div3有定位父级则显示为到div2(父级)的距离
    火狐,谷歌,360,opera:40
    ie8-11:40
    ie7:80 

    offsetLeft
    div3有定位父级则显示为到div2(父级)的距离
    火狐,谷歌,360,opera:40
    ie8-11:50
    ie7:100如果自己没有定位,那么offsetLeft[Top]是到body的距离
     
    *{ margin:0; padding:0}
    div {padding: 40px 50px;}
    #div1 {background: red;}
    #div2 {background: green;position: relative; }
    #div3 {background: orange;position: relative;}
    
    <div id="div1">
      <div id="div2">
        <div id="div3"></div>
      </div>
    </div>
    
    <script> 
    window.onload = function() {
    var oDiv3 = document.getElementById('div3');
        alert( oDiv3.offsetTop );
    }
    </script> 
    div3有定位父级则显示为到div2(父级)的距离
    offsetTop
    火狐,谷歌,360,opera:40 
    ie7-11:40
    ie7:如果自己没有定位,那么offsetTop是到body的距离 80 如果自己有定位,那么就是到定位父级的距离
    offsetLeft
    火狐,谷歌,360,opera:50 
    ie7-11:50
    ie7:如果自己没有定位,那么offsetTop是到body的距离 100 如果自己有定位,那么就是到定位父级的距离
     
     
  • 相关阅读:
    灌溉 最小生成树
    queue的应用uva540
    大数相加
    对于jquery实现原理的浅谈
    div+CSS实现页面的布局要点记录
    spring注解注入的学习
    jsp内置对象学习记录
    web应用的乱码解决
    新发现:排序算法时间复杂度只有O(3n),命名为"wgw"排序法
    java编写的Http协议的多线程下载器
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/5486736.html
Copyright © 2011-2022 走看看