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

資訊專欄INFORMATION COLUMN

scrollHeight, clientHeight, offsetHeight的區(qū)別

bingo / 1743人閱讀

摘要：瀏覽器窗口寬高一些注意點(diǎn)無(wú)論是否出現(xiàn)滾動(dòng)條，這兩個(gè)值都是不變的。要比較這三個(gè)屬性的不同，有個(gè)前提條件，就是元素要出現(xiàn)滾動(dòng)條。

瀏覽器窗口和網(wǎng)頁(yè)文檔

先明確瀏覽器窗口和網(wǎng)頁(yè)文檔的區(qū)別，拿下面這張圖來(lái)說(shuō)

右邊那張圖中，大紅色方框框起來(lái)的是瀏覽器窗口，而網(wǎng)頁(yè)文檔就是左邊這張圖。先不用去管scrollHeight這些東西，后面再解釋。
先明確瀏覽器窗口和網(wǎng)頁(yè)文檔是不同的??！不用去糾結(jié)它們什么時(shí)候高度相等，明白這兩個(gè)代表的含義才是最重要的。

瀏覽器窗口 
寬：window.innerWidth
高：window.innerHeight

一些注意點(diǎn)：

無(wú)論是否出現(xiàn)滾動(dòng)條，這兩個(gè)值都是不變的。

當(dāng)調(diào)整瀏覽器大小時(shí)，這兩個(gè)值會(huì)變。

簡(jiǎn)而言之：就是你可以看到的瀏覽器視窗的大小(不包括頂部的菜單欄)

有小伙伴會(huì)問(wèn)了，那window.outerWidth是和outerHeight是什么呢，這兩個(gè)就是包含菜單欄的，比如你可以在chrome里按下F12打開(kāi)調(diào)試窗口，放在右側(cè)，就可以發(fā)現(xiàn)innerWidth和outerWidth是不同的。

網(wǎng)頁(yè)文檔 
寬：document.body.scrollWidth
高：document.body.scrollHeight

好了既然這里講到scrollHeight了，那剛好把clientHeight和offsetHeight講了。
要比較這三個(gè)屬性的不同，有個(gè)前提條件，就是元素要出現(xiàn)滾動(dòng)條。舉個(gè)栗子就是：




    
    
    
    Document

如圖所示，大家也可以拷貝代碼自己看效果.

對(duì)于以上代碼，分別獲取:

對(duì)于這三個(gè)屬性，還是拿這張圖來(lái)說(shuō)：

scrollHeight: 就是container內(nèi)部的總高度
這里內(nèi)部元素就是large_block，large_block所撐開(kāi)的高度(2000 + 40（上下padding） + 40（上下margin）) = 2080px，然后加上自身container上下各10px的padding,因此一共是2100px

clientHeight: 就是container內(nèi)部可見(jiàn)高度 + 自身padding。
內(nèi)部可見(jiàn)高度為600 - 17(滾動(dòng)條高度)
padding為上下各10，因此一共是600 - 17 + 20 = 603

offsetHeight: 也是container自己本身的可見(jiàn)高度 + 自身padding + 自身border + 滾動(dòng)條
與clientHeight不同的就是要加上自身border以及滾動(dòng)條的高度，因此是603 + 20 + 17 = 640

寫(xiě)在最后

有問(wèn)題的話歡迎討論~一起進(jìn)步

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

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

相關(guān)文章

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

    摘要：由于為外層元素設(shè)置了，所以內(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

  • 原生 JS 獲取元素的尺寸和位置

    摘要：如何獲取元素的真實(shí)尺寸呢通過(guò)下，介紹。這個(gè)函數(shù)主要提供給我們?cè)睾蛯挾仍趦?nèi)的一系列值仍然不要妄想通過(guò)獲得，加上原先的，就可以減去和的值獲得元素的真實(shí)尺寸。 關(guān)于元素的尺寸和位置，這原本是 CSS 干的事，但更多的時(shí)候需要用 JavaScript 來(lái)獲取這些參數(shù)，比如一個(gè)很好的例子 js 實(shí)現(xiàn)的圖片瀑布流。 showImg(https://segmentfault.com/img/bVG...

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

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

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

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

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

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

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

  • 從html,css,javascript三方面談?wù)劇盀g覽器兼容性”的問(wèn)題

    摘要：可以理解為，在屏幕上通過(guò)瀏覽器窗口所能看到網(wǎng)頁(yè)內(nèi)容的高度。都表示瀏覽器中網(wǎng)頁(yè)內(nèi)容的高度，但稍有區(qū)別。解決等瀏覽器不支持標(biāo)簽的問(wèn)題高版本的瀏覽器用了低版本的瀏覽器無(wú)法識(shí)別的元素，從而導(dǎo)致不能解析。這時(shí)候我們就會(huì)面臨這個(gè)兼容性問(wèn)題。 javaScript 在IE、FireFox、Netscape等不同的瀏覽器里，對(duì)于document.body的clientHeight、offsetHeig...

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

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

0條評(píng)論

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