元素偏移量offset系列

offset與style的差別

<div class="f">
        <div class="s"></div>
    </div>
    <script>
        var f = document.querySelector('.f');
        var s = document.querySelector('.s');
        //1.可以得到元素的偏移 位置  傳回的數值不帶機關
        console.log(f.offsetTop); 
        console.log(f.offsetLeft);
        //它以帶有定位的父親為準 
        //如果沒有父親或父親沒有定位則以body為準
        console.log(s.offsetLeft);
        //2.可以得到元素的大小 寬度和高度 
        //包含padding+border+width/height
        console.log(f.offsetWidth);
        console.log(f.offsetHeight);
        //3.傳回帶有定位的父親 若無父親或父親不帶定位則傳回body
        console.log(s.offsetParent);
    </script>