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 如果自己有定位,那么就是到定位父级的距离
     
     
  • 相关阅读:
    Process对象的其他属性:
    python网络编程之开启进程的方式
    python网络编程之进程论
    python网络编程之C/S架构介绍
    面向对象之元类介绍(未完待续)
    面向对象之继承
    面向对象之元类介绍
    python异常处理
    面向对象之内置方法
    面向对象之反射
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/5486736.html
Copyright © 2011-2022 走看看