scrollHeight, clientHeight, offsetHeight的區別

時間 2019-11-08

標籤 scrollheight clientheight offsetheight 區別简体版

原文原文鏈接

瀏覽器窗口和網頁文檔

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

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

瀏覽器窗口

寬：window.innerWidth
高：window.innerHeight

一些注意點：瀏覽器

不管是否出現滾動條，這兩個值都是不變的。
當調整瀏覽器大小時，這兩個值會變。

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

有小夥伴會問了，那window.outerWidth是和outerHeight是什麼呢，這兩個就是包含菜單欄的，好比你能夠在chrome裏按下F12打開調試窗口，放在右側，就能夠發現innerWidth和outerWidth是不一樣的。spa

網頁文檔

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 600px;
            padding: 10px;
            border: 10px solid lightgray;
            overflow: auto; // 注意這個屬性
        }
        .large_block {
            width: 1000px;
            height: 2000px;
            background-color: lightblue;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="large_block"></div>
    </div>
</body>
</html>

如圖所示，你們也能夠拷貝代碼本身看效果.調試

對於以上代碼，分別獲取:code

對於這三個屬性，仍是拿這張圖來講：htm

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

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

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