scrollHeight, clientHeight, offsetHeight的區別

bingo 發布于2019-08-23 12:11 / 1699人閱讀

摘要：瀏覽器窗口寬高一些注意點無論是否出現滾動條，這兩個值都是不變的。要比較這三個屬性的不同，有個前提條件，就是元素要出現滾動條。

瀏覽器窗口和網頁文檔

先明確瀏覽器窗口和網頁文檔的區別，拿下面這張圖來說

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

瀏覽器窗口

寬：window.innerWidth
高：window.innerHeight

一些注意點：

無論是否出現滾動條，這兩個值都是不變的。

當調整瀏覽器大小時，這兩個值會變。

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

有小伙伴會問了，那window.outerWidth是和outerHeight是什么呢，這兩個就是包含菜單欄的，比如你可以在chrome里按下F12打開調試窗口，放在右側，就可以發現innerWidth和outerWidth是不同的。

網頁文檔

寬：document.body.scrollWidth
高：document.body.scrollHeight

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




    
    
    
    Document

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

對于以上代碼，分別獲取:

對于這三個屬性，還是拿這張圖來說：

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

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

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

寫在最后

有問題的話歡迎討論~一起進步

云服務器 GPU云服務器 scrollHeight offsetHeight clientHeight 主機的區別

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

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

Js中關于top、clientTop、scrollTop、offsetTop

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

xorpay 2019-08-20 12:01 評論0 收藏0
原生 JS 獲取元素的尺寸和位置

摘要：如何獲取元素的真實尺寸呢通過下，介紹。這個函數主要提供給我們元素和寬度在內的一系列值仍然不要妄想通過獲得，加上原先的，就可以減去和的值獲得元素的真實尺寸。關于元素的尺寸和位置，這原本是 CSS 干的事，但更多的時候需要用 JavaScript 來獲取這些參數，比如一個很好的例子 js 實現的圖片瀑布流。 showImg(https://segmentfault.com/img/bVG...

simon_chen 2019-08-22 10:47 評論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
從html,css,javascript三方面談談“瀏覽器兼容性”的問題

摘要：可以理解為，在屏幕上通過瀏覽器窗口所能看到網頁內容的高度。都表示瀏覽器中網頁內容的高度，但稍有區別。解決等瀏覽器不支持標簽的問題高版本的瀏覽器用了低版本的瀏覽器無法識別的元素，從而導致不能解析。這時候我們就會面臨這個兼容性問題。 javaScript 在IE、FireFox、Netscape等不同的瀏覽器里，對于document.body的clientHeight、offsetHeig...

William_Sang 2019-08-02 11:37 評論0 收藏0