詳細瞭解 offsetWidth、Height、Top、Left 以及偏移基準 offsetParent

offsetWidth、Height、Top、Left 、offsetParent

前者計算元素的大小, 後者二者返回元素相對 offsetParent 元素的偏移量.

offsetWidth

返回一個元素的佈局寬度;

計算方式:

content width(CSS設定的width) + padding + border  + scrollBarWidth 若是存在垂直滾動條(scrollbar)

offsetHeight

返回一個元素的佈局高度;

計算方式:

content height(CSS設定的height) + padding + border + scrollbarHeight 若是存在水平滾動條(scrollbar)

你們看到 content + padding + border 是否很熟悉, 在盒子模型中說起, 在IE盒模型中,其盒子大小的計算方式也是同樣.

下面咱們來看看 offsetTop、offsetLeft 在瞭解它們兩以前,先來了解下 offsetParent

offsetParent

能夠理解爲偏移的基準, 這有點相似定位屬性中(absolute以最近的祖先元素容器且設置了定位屬性的元素來進行位置偏移.)

什麼樣的元素爲 offsetParent ?

• 擁有定位屬性的元素
• dispaly 爲 table 或 table cell
• 默認狀況下根元素

依次從內往外找, 若是沒有, 默認就是已根元素做爲 offsetParent 也就是偏移的基準.

當元素設置屬性 display: none, 則它相應的 offsetParent屬性返回值爲 null.

注意:

若是元素爲隱藏的（該元素或其祖先元素的 style.display 爲 "none"）,或者該元素的 style.position 被設爲 "fixed", 則該 offsetParent 屬性返回 null。在 IE 9 中 display:none 無影響.

offsetLeft

返回一個元素(border邊框)到 offsetParent 元素左邊界(邊界可能爲邊框或內邊距)的距離.

offsetTop

返回一個元素(border邊框)到 offsetParent 元素上邊界(邊界可能爲邊框或內邊距)的距離.

下面咱們來實戰一下吧

<style>
    html {
        margin: 10px;
        padding: 10px;
        border: 1px solid blue;
    }
    body {
        margin: 10px;
        padding: 10px;
        border: 1px solid red;
    }
    .contanier {
        display: inline-block;
        background-color: #F7EED6;
    }

    .box {
        width: 200px;
        height: 200px;

        margin: 10px;
        padding: 5px;
        border: 5px solid black;
        background-color: #ccc;
    }
</style>

<div class="contanier">
    <div class="box">
    </div>
</div>

<script>
    var ele = document.querySelector(".box");

    ele.offsetLeft;     // IE\Edge 52 Chrome 42  Firefix  41
    ele.offsetTop;      // IE\Edge 52 Chrome 42  Firefix  41
    ele.offsetWidth;    // 200 + 5 * 2 + 5 * 2 = 220
    ele.offsetHeight;   //  200 + 5 * 2 + 5 * 2 = 220
    ele.offsetParent === document.documentElement  // false
    ele.offsetParent === document.body   // true
</script>

這裏分兩種狀況:

當不存在定位屬性時： IE、Edge、Chrome、Firefix 呈現值不同:

IE、Edge 中:

offsetLeft = box margin + body padding + body border + body margin + html padding + html border + html margin

能夠理解爲相對於視口的偏移

Chrome 中:

offsetLeft = box margin + body padding + body border + html padding + html border

能夠理解爲相對於HTML元素邊框(包含邊框)

Firefix 中:

offsetLeft = box margin + body padding + body border + html padding

能夠理解爲相對於HTML元素邊框(不包含邊框).

其實這裏我是有疑問的, 爲何沒有指定定位等屬性狀況下, ele.offsetParent === document.body 卻爲 true , 從結果來看實際偏移計算又是依據HTML或視口來的 , 若是有知道能夠告知下.

當存在定位屬性時, 更改下HTML代碼, 以下:

<style>
        html {
            position: relative;
            margin: 10px;
            padding: 10px;
            border: 1px solid blue;
        }
   </style>

IE、Edge、Firefox 中:

offsetLeft = box margin + body padding + body border + html padding

能夠理解爲相對於HTML邊框偏移量(不包含邊框)

Chrome 中:

offsetLeft = box margin + body padding + body border + html padding + html border

能夠理解爲相對於HTML邊框偏移量(含邊框)

若是不存在邊框的話,在IE、Edge、Chrome、Firefox呈現方式同樣的.