原生js offset的使用學習

最近用到了offset這個鬼，但是有不理解的地方，所以測試一下！！
基本用法：找到對象后，使用
offsetLeft \ offsetTop \ offsetWidth \ offsetHeight
就可以得到對象的 寬、高、距離左邊的距離，距離右邊的距離的具體值。

忘記了，外邊的大框框用的position:relative;

搞了兩個，里面的灰色塊，一個用的定位，一個用的margin；

通過比較，

注意第2、4數據，完全一樣，得到的是距離其父元素的左邊距和上邊距

  function offset(elem){
            var obj={
                left:elem.offsetLeft,
                top:elem.offsetTop,
                width:elem.offsetWidth,
                height:elem.offsetHeight
            }
         
            return obj;
  }

 

然后加點東西

function offset(elem){
            var obj={
                left:elem.offsetLeft,
                top:elem.offsetTop,
                width:elem.offsetWidth,
                height:elem.offsetHeight
            }
           while(elem != document.body){
                elem = elem.offsetParent ;
                console.log(elem);
                obj.left += elem.offsetLeft ;
                obj.top += elem.offsetTop ;
            }
            return obj;

}

在看第2、4數據時，left和top的值都增加了，這是加上了與元素邊距的結果。

得到是元素距離視口的左邊距和上邊距

 

是offsetParent起的作用

原因呢？？？我查查，我也不知道。

 

總結：：

使用offset優先獲取到視口的邊距，當元素父元素有position定位的時候，獲取的是到父元素的邊距。

如果使用 elem = elem.offsetParent ;的時候獲取的值就是到視口的距離。

描述的有點，呵呵呵呵。。。見諒！！！這個鬼在計算元素位置的時候是很好用的，值可以直接用，沒有單位！！！