頁面的一些測量數據

網頁的一些測量數據

主要是理清scrollHeight、clientHeight、offsetHeight、scrollTop、offsetTop，先前一直混淆不清。

針對整個HTML頁面

先只考慮整個頁面的屬性。
測試採用Chrome瀏覽器，測試用的代碼以下：

html:
  body{
    height:2700px;
  }
  div{
    height:2600px;
    width:2400px;
    background: tan;
  }
html:
  <div>
  </div>

顯示效果

在chrome裏面看html與body兩個的屬性測量。
body結果以下

html結果以下

• height
  使用方式是document.body.style.height。它是比較特殊的一個值，由於它屬性對象的style對象的一個成員，它的值是一個String，而其它的值都是Int類型的。不過這種調用方式只能獲得行內樣式。要想獲得真實的height屬性，就要使用getComputedStyle(document.body).height了。IE是使用currentSytle，因此要作個選擇操做。
  結論是：
• clientHeight
  內容可見區域的高度。document.body.clientHeight爲2700px，而若是設置body的css爲{padding:0,margin:0}的話，則會獲得2716。緣由是body的margin爲8px。
• scrollHeight
  獲得的`document.body.scrollHeight'爲2716px。
• offsetHeight
  和clientHeight同樣，`document.body.offsetHeight'獲得2700px。
• scrollTop
  頁面往下滾動了的距離。
• offsetTop
  對整個頁面無效，始終是0。

針對一個具體的元素

而後就某一個設置了overflow:scroll的div元素來測試。

css:
    div#d{
      width:160px;
      height:160px;
      border: solid black 30px;
      padding:30px;
      margin:30px;
      overflow: scroll;
    }
 html:
  <div id='d'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati asperiores, saepe rerum maiores id iste doloremque quia. Veniam praesentium odio excepturi ducimus quisquam vel cumque harum adipisci tempore, fuga, aut?</div>

顯示的結果以下

而後在chrome下看3個height的值

而在FF下分別是19六、280、324。
而後發現padding對三個height值全是有影響的（註釋了padding三個值全減了60，但在FF下scrollHeight只減了30左右，變成293，很其怪，不過chrome根據個人測試chrome的結果始終是合理的），而margin全無效。
而後分別註釋其餘語句，最終的結論是：

• clientHeight屬性表示頁面可見區域的高度，就是截圖中的白色部分！值等於元素的內容+padding。不包括border、margin和滾動條。周圍那圈白色部分就是padding部分。
• offsetHight屬性的值，等於元素內容+border+padding和滾動條。不包括margin。
• scrollHeight屬性的值明顯要大出許多。但其實它是最簡單的值。它的值是元素的實際高度。

兩個top的值也是挻好理解的。

• scrollTop
  分別拉動右側滑動條，發現scorllTop會發生改變，一目瞭然。它能夠獲取對象的實際最高的地方距離顯示範圍的頂部間的距離，也就是下拉的距離。它返回值是一個整數，單位是像素。
• offsetTop
  其實offsetTop指的是當前元素上邊緣距離offsetParent的距離，也就是我在代碼中設置的margin值。offsetParent是當前元素最近的採用了非靜止定位的祖先元素。若是不存在這樣的祖先元素，那麼offsetParent就是body。
  offsetParent是一個很重要的概念！！！要想明確各類浮動和定位等的關係就要準確的找出各個元素的非靜止定位的祖先元素。
  順便看看stackoverflow上的這個回答吧！
  而後盜了它兩張圖：
  

很氣的就是，雖然看到許多文章都寫了這些內容，但好多錯的啊！！而後只能本身動手了。