溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JS盒子模型的基本屬性怎么使用

發(fā)布時(shí)間：2022-08-08 14:32:57 來源：億速云 閱讀：125 作者：iii 欄目：web開發(fā)

這篇“JS盒子模型的基本屬性怎么使用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JS盒子模型的基本屬性怎么使用”文章吧。

JS盒子模型的基本屬性：clientWidth/Height、offsetWidth/Height、offsetTop/Left、scrollWidth/Height、scrollTop/Left，希望對(duì)需要的朋友有所幫助！

寫一個(gè)JS盒子

 <style>
    .container {
        width: 300px;
        height: 300px;
        border: 3px solid red;
        margin: 50px;
        position: relative;
    }
    .box {
        padding: 30px;
        width: 100px;
        height: 150px;
        border: 10px solid lightblue;
        position: absolute;
        top: 50px;
        left: 50px;
        font-size: 15px;
        line-height: 100px;
        text-align: center;
        overflow: auto;
    }
</style>

<body>
    <div class="container">
        <div class="box">盒子</div>
    </div>
</body>

模型：
JS盒子模型的基本屬性怎么使用
盒子的屬性：

client

  • clientWidth / clientHeight ：盒子內(nèi)部的寬高
    (1) clientWidth: 內(nèi)容width + 左右padding
    (2) clientHeight: 內(nèi)容height + 上下padding
    JS盒子模型的基本屬性怎么使用

  • clientTop / clientLeft ：左邊框和上邊框的寬度
    JS盒子模型的基本屬性怎么使用

offset

  • offsetWidth / offsetHeight :盒子可見區(qū)域的寬高
    (1) offsetWidth: clientWidth+ 左右border
    (2) offsetHeight: clientHeight+ 上下border
    JS盒子模型的基本屬性怎么使用

  • offsetParent：獲取它的父參照物（不一定是父元素）
    父參照物的查找：
    (1) 在同一個(gè)平面中，最外層元素是所有后代元素的父參照物；
    (2) 而基于position：absolute/relative/fixed會(huì)讓元素脫離文檔流，成為一個(gè)新的平面，從而改變?cè)氐母竻⒄瘴铮?br/> (3) body的父參照物為null。

  • offsetTop / offsetLeft：距離其父參照物的上/左偏移（當(dāng)前元素的外邊框到父參照物元素的里邊框）
    JS盒子模型的基本屬性怎么使用

scroll

  • scrollWidth / scrollHeight ：可視區(qū)內(nèi)部的真實(shí)寬高
    (1) 沒有內(nèi)容溢出時(shí): scrollWidth/Height = clientWidth/Height
    (2) 有溢出的話不一樣，結(jié)果約等于盒子真實(shí)內(nèi)容的寬高:上下padding+真實(shí)內(nèi)容的寬高；
    (3) 只要出現(xiàn)溢出的情況，overflow的值，也會(huì)一定程度地改變scroll的結(jié)果。
    JS盒子模型的基本屬性怎么使用

  • scrollTop / scrollLeft：豎向/橫向滾動(dòng)條卷曲的高度/寬度
    JS盒子模型的基本屬性怎么使用
    注：上面的屬性里，只有scrollLeft和scrollTop可以設(shè)置值，其他屬性都是只讀

以上就是關(guān)于“JS盒子模型的基本屬性怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手