成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

offsetWidth/offsetHeight、offsetLeft/offsetTop、offs

JellyBool / 1683人閱讀

摘要：因?yàn)橐坏┪覀兘o父元素設(shè)置了會(huì)影響文檔流。是指當(dāng)前元素相對(duì)于父級(jí)參照物的偏移量。在標(biāo)準(zhǔn)瀏覽器中是指當(dāng)前元素的左邊框的外沿到父級(jí)參照物邊框的內(nèi)沿，如上圖中的，，所示。盒子上邊框的高度。

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

offsetWidth/offsetHeight

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

offsetWidth

就是當(dāng)前元素的寬度width，包括邊框、padding、以及內(nèi)容的寬度，即：

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

offsetHeight

就是當(dāng)前元素的高度height，包括邊框、padding、以及內(nèi)容的高度，即：

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

offsetParent

offsetParent:是指父級(jí)參照物。父級(jí)參照物不是父級(jí)元素，父級(jí)參照物與父級(jí)元素?zé)o關(guān)。父級(jí)參照物默認(rèn)是body，如果我們給當(dāng)前元素的父元素設(shè)置了position(等于relative|absolute|fixed)在會(huì)改變父級(jí)參照物。因?yàn)橐坏┪覀兘o父元素設(shè)置了position會(huì)影響文檔流。
例如有這樣的文檔結(jié)構(gòu)：

//DOM結(jié)構(gòu)


    

        


        

    




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

我們可以在控制臺(tái)這樣查看center、inner、outer的父級(jí)參照物

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

由此可以說(shuō)明，如果不給div設(shè)置position屬性，那么默認(rèn)的div的父級(jí)參照物都是body

下面我們給outer、inner都設(shè)置了position:relative會(huì)發(fā)生什么？

//DOM不發(fā)生變化，我們把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;
}

此時(shí)我們?cè)诳刂婆_(tái)查看center、inner、outer的父級(jí)參照物

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

由此可見(jiàn)，給父級(jí)設(shè)置position可以改變父級(jí)參照物。

offsetLeft/offsetTop

offsetLeft/offsetTop:是指當(dāng)前元素相對(duì)于父級(jí)參照物的偏移量。
在標(biāo)準(zhǔn)瀏覽器中是指：當(dāng)前元素的左邊框的外沿到父級(jí)參照物邊框的內(nèi)沿，如上圖中的4，5，6所示。
在IE8中，offsetLeft是指：當(dāng)前元素的左邊框的外沿到父級(jí)參照物的外沿，如上圖中的7，8，9所示。

用offsetLeft/offsetTop我們可以計(jì)算出當(dāng)前元素的左上角坐標(biāo)（即當(dāng)前元素距離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的區(qū)別

offsetLeft/offsetTop：是指當(dāng)前元素相對(duì)于父級(jí)參照物的偏移量。

clientLeft/clientTop：

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101418.html

相關(guān)文章

  • Js中 關(guān)于top、clientTop、scrollTop、offsetTop

    摘要：由于為外層元素設(shè)置了，所以?xún)?nèi)層元素會(huì)向上卷。和全面支持，而和不支持除外。認(rèn)為是網(wǎng)頁(yè)內(nèi)容高度，不過(guò)最小值是。認(rèn)為和都是網(wǎng)頁(yè)內(nèi)容高度，只不過(guò)當(dāng)網(wǎng)頁(yè)內(nèi)容高度小于等于時(shí)，的值是，而可以小于。認(rèn)為是可視區(qū)域滾動(dòng)條加邊框。 轉(zhuǎn)載自http://www.cnblogs.com/seven_...網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth;網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document....

    xorpay 評(píng)論0 收藏0

  • 容易混淆的client-*,scroll-*,offset-*

    摘要：容易混淆上來(lái)不說(shuō)話(huà)，先拋出幾個(gè)問(wèn)題是時(shí)候談?wù)勊鼈冎g的區(qū)別了，是不是已經(jīng)混亂了好吧，一步一步來(lái)搞清楚這些東西是啥。要搞清這幾個(gè)容易混淆的概念，我的建議是運(yùn)行文章中的例子。和類(lèi)似于和，不同的是不包含邊框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來(lái)不說(shuō)話(huà)，先拋出幾個(gè)問(wèn)題： offsetWidth offs...

    Jokcy 評(píng)論0 收藏0

  • 容易混淆的client-*,scroll-*,offset-*

    摘要：容易混淆上來(lái)不說(shuō)話(huà)，先拋出幾個(gè)問(wèn)題是時(shí)候談?wù)勊鼈冎g的區(qū)別了，是不是已經(jīng)混亂了好吧，一步一步來(lái)搞清楚這些東西是啥。要搞清這幾個(gè)容易混淆的概念，我的建議是運(yùn)行文章中的例子。和類(lèi)似于和，不同的是不包含邊框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來(lái)不說(shuō)話(huà)，先拋出幾個(gè)問(wèn)題： offsetWidth offs...

    tolerious 評(píng)論0 收藏0

  • js獲取元素的距離父元素、窗口的距離offsetTop,offsetHeight,clientHei

    摘要：前言相信很多項(xiàng)目中都會(huì)有這樣一個(gè)小需求端，移動(dòng)端則是點(diǎn)擊，鼠標(biāo)移上某個(gè)菜單或者某個(gè)位置，顯示一個(gè)彈出框，移開(kāi)則隱藏彈出框，就是中效果，這種通常做法是每個(gè)子菜單下都有一個(gè)彈框，父元素相對(duì)定位，子元素絕對(duì)定位，只需要控制的彈框的顯示與隱藏即可， 前言 相信很多項(xiàng)目中都會(huì)有這樣一個(gè)小需求（PC端，移動(dòng)端則是點(diǎn)擊），鼠標(biāo)移上某個(gè)菜單或者某個(gè)位置，顯示一個(gè)彈出框，移開(kāi)則隱藏彈出框，就是css中h...

    張憲坤 評(píng)論0 收藏0

  • js獲取元素的距離父元素、窗口的距離offsetTop,offsetHeight,clientHei

    摘要：前言相信很多項(xiàng)目中都會(huì)有這樣一個(gè)小需求端，移動(dòng)端則是點(diǎn)擊，鼠標(biāo)移上某個(gè)菜單或者某個(gè)位置，顯示一個(gè)彈出框，移開(kāi)則隱藏彈出框，就是中效果，這種通常做法是每個(gè)子菜單下都有一個(gè)彈框，父元素相對(duì)定位，子元素絕對(duì)定位，只需要控制的彈框的顯示與隱藏即可， 前言 相信很多項(xiàng)目中都會(huì)有這樣一個(gè)小需求（PC端，移動(dòng)端則是點(diǎn)擊），鼠標(biāo)移上某個(gè)菜單或者某個(gè)位置，顯示一個(gè)彈出框，移開(kāi)則隱藏彈出框，就是css中h...

    draveness 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<