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

資訊專欄INFORMATION COLUMN

JS寬高（client、offset、scroll）的介紹

mj / 2404人閱讀

摘要：?jiǎn)栴}今日頭條的一道筆試題，的區(qū)別。結(jié)果如圖更詳細(xì)的介紹，請(qǐng)點(diǎn)擊

問(wèn)題

今日頭條的一道筆試題，offsetWidth、clientWidth、scrollWidth的區(qū)別。

分析

JS中document對(duì)象的寬高有三種，cilent、offset、scroll

client： clientWidth和clientHeight，clientTop和clientLeft

clientWidth和clientHeight：該屬性指的是元素的可視部分寬度和高度，即padding+content，統(tǒng)分為三種情況:

假如元素?zé)opadding無(wú)滾動(dòng)
clientWidth = style.width

假如元素有padding無(wú)滾動(dòng)
clientWidth = style.width + style.padding*2

假如元素有padding有滾動(dòng)，且滾動(dòng)是顯示的
clientWidth = style.width + style.padding*2 - 滾動(dòng)軸寬度
clientHeight同理

clientTop和clientLeft ：這一對(duì)屬性是用來(lái)讀取元素的border的寬度和高度的

clientTop = border-top 的 border-width

clientLeft = border-left 的 border-width

        body {
            width: 500px;
            height: 500px;
            border: 20px solid red;
            margin: 20px;
            padding: 10px;
        }
        div {
            width: 300px;
            height: 300px;
            margin: 10px;
            padding: 20px;
            border: 20px solid gray;
            overflow: auto;
        }
   
        
            

                我是文字

                我是文字

                我是文字

                我是文字

                我是文字

結(jié)果如圖:

offset：offsetWidth和offsetHeight，offsetTop和offsetLeft

offsetWidth和offsetHeight：這一對(duì)屬性指的是元素的border+padding+content的寬度和高度
該屬性和其內(nèi)部的內(nèi)容是否超出元素大小無(wú)關(guān)，只和本來(lái)設(shè)置的border以及width和height有關(guān)。統(tǒng)分為三種情況:

假如元素?zé)opadding無(wú)滾動(dòng)無(wú)border
offsetWidth = clientWidth = style.width

假如元素有padding無(wú)滾動(dòng)有border
offsetWidth = style.width = style.padding*2 + border寬度*2

假如元素有padding有滾動(dòng)有border，且滾動(dòng)是顯示的
offsetWidth = style.width = style.padding*2 + (border-width)*2
offsetWidth = clientWidth + 滾軸寬度 + border寬度*2
offsetHeight同理

offsetTop和offsetLeft：這個(gè)需要先了解offsetParent，規(guī)則如下

如果當(dāng)前元素的父級(jí)元素沒(méi)有進(jìn)行css定位（position為absolute或relative），offsetParent為body

如果當(dāng)前元素的父級(jí)元素中有ccss定位(position為absolute或relative)，offsetParent取最近的那個(gè)父級(jí)元素

offsetTop和offsetLeft的計(jì)算規(guī)則如下：

在IE8/9/10以及chrome中
offsetLeft = (offsetParent的margin-left) + (offsetParent的border寬度) + (offsetParent的padding-left) + (當(dāng)前元素的margin-left)

在FireFox中
offsetLeft = (offsetParent的margin-left) + (offsetParent的padding-left) + (當(dāng)前元素的margin-left)
offsetTop同理

style和body代碼同上。結(jié)果如圖：

scroll：scrollWidth和scrollHeight，scrollTop和scrollLeft

scrollWidth和scrollHeight：細(xì)分為body和其他元素，這里不對(duì)body做介紹(詳細(xì)介紹請(qǐng)點(diǎn)擊)

在某div中scrollWidth和scrollHeight計(jì)算規(guī)則如下

無(wú)滾動(dòng)軸時(shí)：
scrollWidth = clientWhidth = style.width + style.padding*2

有滾動(dòng)軸時(shí)：
scrollWidth = 實(shí)際內(nèi)容的寬度 + padding*2
scrollHeight同理

scrollTop和scrollLeft：這對(duì)元素是可讀寫的，指的是當(dāng)元素其中的內(nèi)容超出其寬高的時(shí)候，元素被卷起的寬度和高度。

style和body代碼同上。結(jié)果如圖：

更詳細(xì)的介紹，請(qǐng)點(diǎn)擊

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

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

相關(guān)文章

  • JavaScript中的各種寬高屬性

    摘要：在中，存在著多的關(guān)于高度和寬度的屬性，比如等等這么多，傻傻分不清也正常啊。第二問(wèn)題對(duì)象的屬性引用的是對(duì)象，表示該窗口中當(dāng)前顯示文檔的。如果出現(xiàn)滾動(dòng)條，滾動(dòng)條會(huì)遮蓋元素的寬高，那么該屬性就是其本來(lái)寬高減去滾動(dòng)條的寬高。 在js中，存在著N多的關(guān)于高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

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

  • JS、jQuery各種寬高屬性

    摘要：下各種寬高和下寬高分為掛載在對(duì)象和對(duì)象下的寬高屬性，先說(shuō)下和的區(qū)別對(duì)象表示瀏覽器中打開(kāi)的窗口，對(duì)象可以省略，比如可以簡(jiǎn)寫為對(duì)象是對(duì)象的一部分，那么我們可以寫成，瀏覽器的文檔成為對(duì)象下的寬高屬性瀏覽器窗口內(nèi)部寬度瀏覽器窗口內(nèi)部高度瀏覽器窗口外 JS下各種寬高 Window和Document:JS下寬高分為掛載在Window對(duì)象和Document對(duì)象下的寬高屬性，先說(shuō)下Window和Do...

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

  • 網(wǎng)頁(yè)中的各種上下左右寬高值

    三種類型offset client scroll offset 只讀屬性。 width/height——顯示出來(lái)的屏幕尺寸 top/left——相對(duì)于定位父元素的絕對(duì)位置 client 只讀屬性。 width/height——不帶邊框的offset，也不包含滾動(dòng)條寬度 top/left——內(nèi)邊距的外邊緣與邊框外邊緣的距離，通常是邊框?qū)挾? scroll width/height——只讀，帶...

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

  • 網(wǎng)頁(yè)中的各種上下左右寬高值

    三種類型offset client scroll offset 只讀屬性。 width/height——顯示出來(lái)的屏幕尺寸 top/left——相對(duì)于定位父元素的絕對(duì)位置 client 只讀屬性。 width/height——不帶邊框的offset，也不包含滾動(dòng)條寬度 top/left——內(nèi)邊距的外邊緣與邊框外邊緣的距離，通常是邊框?qū)挾? scroll width/height——只讀，帶...

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

  • js 獲取窗口、屏幕、頁(yè)面元素寬高+位置（兼容ie）

    摘要：獲取各種寬高位置先上總結(jié)，再細(xì)細(xì)道來(lái)總結(jié)獲取屏幕寬高總區(qū)域可用區(qū)域有些手機(jī)存在底部任務(wù)欄，一般直接用第一個(gè)就獲取瀏覽器寬高獲取瀏覽器位置獲取頁(yè)面寬高方法方法移動(dòng)端，一般用就了獲取寬高內(nèi)部寬高，不包滾動(dòng)條和整體寬高滾動(dòng)條含被隱藏的內(nèi)部 js 獲取各種寬高+位置 -- 先上總結(jié)，再細(xì)細(xì)道來(lái) 總結(jié) 獲取屏幕寬高 window.screen.width / window.scr...

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

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

0條評(píng)論

mj

男|高級(jí)講師

TA的文章

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