offsetWidth/offsetHeight、offsetLeft/offsetTop、offsetParent

接下來咱們依然討論盒模型中的offset系列：offsetWidth/offsetHeight、offsetLeft/offsetTop、offsetParent

offsetWidth/offsetHeight

正如在上一篇文章https://segmentfault.com/a/11...，在這裏在寫一遍，但願把幾個相似的詞放在一塊兒去理解能夠更好的區分他們的意思。

1. offsetWidth

   就是當前元素的寬度width，包括邊框、padding、以及內容的寬度，即：

   offsetWidth === border(left/right) + padding(left/right) + 內容的寬度(width);
   //或者
   offsetWidth === clientWidth + border(left/right);

2. offsetHeight

   就是當前元素的高度height，包括邊框、padding、以及內容的高度，即：

   offsetHeight === border(top/bottom) + padding(top/bottom) + 內容的高度(height);
   //或者
   offsetHeight === clientHeight + border(top/bottom);

offsetParent

offsetParent:是指父級參照物。父級參照物不是父級元素，父級參照物與父級元素無關。父級參照物默認是body，若是咱們給當前元素的父元素設置了position(等於relative|absolute|fixed)在會改變父級參照物。由於一旦咱們給父元素設置了position會影響文檔流。
例若有這樣的文檔結構：

//DOM結構
<div id="outer" class="outer">
    <div id="inner" class="inner">
        <div id="center" class="center">

        </div>
    </div>
</div>

//css
 .outer{
        width: 260px;
        height: 260px;
        border: 20px solid red;
        margin: 20px auto;
    }
 .inner{
        width: 160px;
        height: 160px;
        border: 20px solid green;
        margin: 20px auto;
    }
 .center{
        width: 60px;
        height: 60px;
        border: 20px solid blue;
        margin: 20px auto;
    }

咱們能夠在控制檯這樣查看center、inner、outer的父級參照物

center.offsetParent.tagName //=> "BODY"
inner.offsetParent.tagName   //=> "BODY"
outer.offsetParent.tagName   //=> "BODY"

由此能夠說明，若是不給div設置position屬性，那麼默認的div的父級參照物都是body

下面咱們給outer、inner都設置了position:relative會發生什麼？

//DOM不發生變化，咱們把CSS修改爲下面這樣
.outer{
    ***position: relative;***
    width: 260px;
    height: 260px;
    border: 20px solid red;
    margin: 20px auto;
}
.inner{
    ***position: relative;***
    width: 160px;
    height: 160px;
    border: 20px solid green;
    margin: 20px auto;
}
.center{
    width: 60px;
    height: 60px;
    border: 20px solid blue;
    margin: 20px auto;
}

此時咱們在控制檯查看center、inner、outer的父級參照物

center.offsetParent   //=> div#inner.inner
inner.offsetParent    //=> div#outer.outer
outer.offsetParent    //=> body

因而可知，給父級設置position能夠改變父級參照物。

offsetLeft/offsetTop

offsetLeft/offsetTop:是指當前元素相對於父級參照物的偏移量。
在標準瀏覽器中是指：當前元素的左邊框的外沿到父級參照物邊框的內沿，如上圖中的4，5，6所示。
在IE8中，offsetLeft是指：當前元素的左邊框的外沿到父級參照物的外沿，如上圖中的7，8，9所示。

用offsetLeft/offsetTop咱們能夠計算出當前元素的左上角座標（即當前元素距離body頂部和body左邊的距離）

var offset = function (curEle) {
    var topY = curEle.offsetTop,
        leftX = curEle.offsetLeft,
        parent = curEle.offsetParent;

    while (parent.tagName !== 'BODY') {
        if (!/MSIE 8/i.test(navigator.userAgent)) {
            topY += parent.clientTop;
            leftX += parent.clientLeft;
        }
        topY += parent.offsetTop;
        leftX += parent.offsetLeft;
        parent = parent.offsetParent;
    }
    return {X: leftX , Y: topY};
}

offsetLeft/offsetTop 和 clientLeft/clientTop的區別

offsetLeft/offsetTop：是指當前元素相對於父級參照物的偏移量。

clientLeft/clientTop：

//clientLeft:盒子左邊框的寬度。
 clientLeft === paddingLeft;
 //clientTop:盒子上邊框的高度。
 clientTop === paddingTop;