offsetWidth/offsetHeight、offsetLeft/offsetTop、offs

JellyBool 發布于2019-08-23 14:57 / 1675人閱讀

摘要：因為一旦我們給父元素設置了會影響文檔流。是指當前元素相對于父級參照物的偏移量。在標準瀏覽器中是指當前元素的左邊框的外沿到父級參照物邊框的內沿，如上圖中的，，所示。盒子上邊框的高度。

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

offsetWidth/offsetHeight

正如在上一篇文章https://segmentfault.com/a/11...，在這里在寫一遍，希望把幾個類似的詞放在一起去理解可以更好的區分他們的意思。

offsetWidth

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

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

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結構

    
        

        
    


//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;

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101418.html

Js中關于top、clientTop、scrollTop、offsetTop

摘要：由于為外層元素設置了，所以內層元素會向上卷。和全面支持，而和不支持除外。認為是網頁內容高度，不過最小值是。認為和都是網頁內容高度，只不過當網頁內容高度小于等于時，的值是，而可以小于。認為是可視區域滾動條加邊框。轉載自http://www.cnblogs.com/seven_...網頁可見區域寬： document.body.clientWidth;網頁可見區域高： document....

xorpay 2019-08-20 12:01 評論0 收藏0
容易混淆的client-*,scroll-*,offset-*

摘要：容易混淆上來不說話，先拋出幾個問題是時候談談它們之間的區別了，是不是已經混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個容易混淆的概念，我的建議是運行文章中的例子。和類似于和，不同的是不包含邊框大小。容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來不說話，先拋出幾個問題： offsetWidth offs...

Jokcy 2019-08-19 18:44 評論0 收藏0
容易混淆的client-*,scroll-*,offset-*

摘要：容易混淆上來不說話，先拋出幾個問題是時候談談它們之間的區別了，是不是已經混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個容易混淆的概念，我的建議是運行文章中的例子。和類似于和，不同的是不包含邊框大小。容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來不說話，先拋出幾個問題： offsetWidth offs...

tolerious 2019-08-01 15:27 評論0 收藏0
js獲取元素的距離父元素、窗口的距離offsetTop,offsetHeight,clientHei

摘要：前言相信很多項目中都會有這樣一個小需求端，移動端則是點擊，鼠標移上某個菜單或者某個位置，顯示一個彈出框，移開則隱藏彈出框，就是中效果，這種通常做法是每個子菜單下都有一個彈框，父元素相對定位，子元素絕對定位，只需要控制的彈框的顯示與隱藏即可，前言相信很多項目中都會有這樣一個小需求（PC端，移動端則是點擊），鼠標移上某個菜單或者某個位置，顯示一個彈出框，移開則隱藏彈出框，就是css中h...

張憲坤 2019-08-22 16:11 評論0 收藏0
js獲取元素的距離父元素、窗口的距離offsetTop,offsetHeight,clientHei

摘要：前言相信很多項目中都會有這樣一個小需求端，移動端則是點擊，鼠標移上某個菜單或者某個位置，顯示一個彈出框，移開則隱藏彈出框，就是中效果，這種通常做法是每個子菜單下都有一個彈框，父元素相對定位，子元素絕對定位，只需要控制的彈框的顯示與隱藏即可，前言相信很多項目中都會有這樣一個小需求（PC端，移動端則是點擊），鼠標移上某個菜單或者某個位置，顯示一個彈出框，移開則隱藏彈出框，就是css中h...

draveness 2019-08-30 14:25 評論0 收藏0