dom 兼容性问题 2 offset

image

 

 

offsetParent :  离当前节点最近的具有定位属性的祖先节点。

  如果所有祖先节点都没有定位属性：
    对于一个有定位属性的元素：
      ie6、7 ： offsetParent 是 html 节点
      其它浏览器： offsetParent 是 body 节点
      
    对于一个没有定位的元素：
      ie6/7 : 最近的一个触发了 haslayout 属性的祖先节点，如果所有祖先节点都没有触发 haslayout ，默认为 body 节点。
      其它浏览器： body。
      
    如果当前节点有 display:none; 属性 在 ie11 以上及标准浏览器，offsetParent为null,ie10以下浏览器不受影响。


  回流 、重绘
offsetLeft : 当前节点左边到 offsetParent 左边的距离。

offsetTop : 当前节点上边到 offsetParent 上边的距离。


  注意： 
    1，如果body和html有边框和外边距, offsetLeft 和 offsetTop 在所有浏览器下的取值都会不一样。
    
    2，在ie6、7浏览器下 ，offsetLeft和offsetTop会计算 offsetParent 的边框值，其它浏览器不会计算边框值。
    
    3，如果当前节点设置了 display: none; 属性，offsetLeft 和 offsetLeft 的值都为0.(ie6/7下为 -1);


  温馨提醒：没有 offsetRight 和  offsetBottom 属性！
-------------------------------------------------------------------------------
ff浏览器bug
#box { width: 1200px; height: 200px; background: #ccc; margin: 50px auto 0; position: relative; border: 4px solid #333; overflow: hidden; }
#div1 { width: 200px; height: 200px; background: red; position: absolute; left: 2px; top: 0; }
</style>
</head>

<body>

<div id="box">
  <div id="div1"></div>
</div>


</body>
</html>

<script>

var oDiv = document.getElementById('div1');


//alert( oDiv.offsetLeft );

setInterval(function(){

  oDiv.style.left = oDiv.offsetLeft + 2 + 'px';
  
},30);

/*

offsetLeft : 
  在其它浏览器下，就是节点自身的left值。
  
  在firefox下 ： 
    offsetLeft = 节点自身的 left 值 - 边框值


div运动轨迹：

边框为0
    left    border      offsetLeft    speed     target  
     0          0               0                 2            2
     2          0               2                 2            4
     4          0               4                 2            6
     6          0               6                 2            8

边框与speed相等
    left    border      offsetLeft    speed     target  
     0          2               -2                 2            0
     0          2               -2                 2            0
     0          2               -2                 2            0
     0          2               -2                 2            0
     0          2               -2                 2            0

边框大于speed
    left    border      offsetLeft    speed     target  
     0          4               -4                 2           -2
     -2        4               -6                 2           -4
     -4        4               -8                 2           -6
-------------------------------------------------------------------------------
width / height / margin / padding / border 

offsetWidth : width + padding + border
clientWidth : width + padding

offsetHeight : height + padding + border
clientHeight : height + padding

以上四个属性指的是元素在页面中所占空间大小，如果元素没有占页面空间，四个属性的值都为 0 。
-------------------------------------------------------------------------------
操作属性的前两种方式：  .   和  ['']

第三种方式：

  获取属性：getAttribute('');
  设置属性：setAttribute('','');
  删除属性：removeAttribute('')

  兼容问题：
    1，获取以关键字或保留字作为名称的属性时，有兼容问题。
    2，获取第二层以上属性时，只有ie浏览器支持。

  好处：
    1，可以获取行间的自定义属性。
    2，可以获取到 url、src、href 等的属性值，而不是路径地址。
      (在ie6/7/8下需要设置第二个参数2,告诉浏览器获取的是属性值而不是路径)
  
oDiv.dataset.bbs = 'bbs.miaov.com';



html5 里对自定义属性进行了初步规范，但是要求所有自定义属性都必须以 data- 作为属性名称的开头。
posted @ 2015-06-03 14:05  Crack's_Blog  阅读(592)  评论(0)  编辑  收藏  举报