邊距 偏移 結果 元素 tno 例子 doc eight apu

相信大家剛接觸js的時候，總是被offsetHeight,offsetTop,clientHeight,clientTop等等一系列的offset問題搞的頭暈。剛剛看高程，也看到了這方面的知識。記錄一下，增加理解。

一、首先說偏移量：offsetHeight,offsetTop.

看圖說話，方便理解。

這是我畫的一個簡單的偏移量圖。黃色區域是我們的元素，她包括邊框，內邊距。我們要知道寬、高是對應的。上下左右是對應的。所以最起碼不要把offsetLeft和offsetWidth混淆在一起。width和height是一對，top和left是一對。

offsetHeight:說白了就是垂直高度，只要在邊框以內的全部算上，什麽內邊距啊、邊框啊，以及水平

的滾動條啊等等。也就是上圖黃色區域的高度。

offsetWidth:和上面的小夥伴是一樣的。

看下面的一對：

offsetTop:舉個栗子就是你桌面上的一本書，書頭到桌子頭的距離。

offsetLeft:一樣。

再看：

offsetParent:聲明：offsetParent不一定等於parentNode。說白了，offsetParent不一定該元素的爹！有可能是她爺爺，爺爺的爹.......

下面舉個例子：

<div id="outer"> <div id="inner"> </div> </div> <script> window.onload = function () { var inner = document.getElementById("inner"); var outer = document.getElementById("outer"); console.log(inner.offsetLeft); console.log(inner.offsetTop) console.log(inner.offsetParent) console.log(outer.offsetLeft); console.log(outer.offsetTop) console.log(outer.offsetParent)
} </script>

 body {
        padding
 
-top: 100px;
        padding-left: 200px;
        margin: 0;
        background-color: #333333;
    }
    #outer{
        height: 300px;
        width: 300px;
        background-color:rebeccapurple; 
        padding-top: 30px;
        padding-left: 50px;
    }
    #inner{
        background-color: blue;
        height: 50px;
        width: 50px;
    }
 

一個大div，一個小div。outer和inner。

輸入結果：

從結果上:inner的offsetTop是body的padding+outer的padding。

兩個div的offsetParent都是body。所以可以得出結論：div元素的offsetParent都是body。

明天再更新。

---

js的各個offset！offsetHeight,offsetTop