1. 首頁
  2. 問答
  3. offsetHeight和clientHeight之間的區別

offsetHeight和clientHeight之間的區別

2010-11-05 51 views

回答

137

clientHeight：

返回可見區域的高度爲對象，以像素爲單位。該值包含填充的高度，但不包含scrollBar，邊框和邊距。

offsetHeight：

返回可見區域的高度爲對象，以像素爲單位。該值包含填充，滾動條和邊框的高度，但不包括邊距。

所以，offsetHeight包含滾動條和邊框，clientHeight沒有。

來源

2010-11-05 14:05:14 Oded

+3

我注意到的另一件事是clientHeight比offsetHeight快得多。你有什麼想法，爲什麼？ – disc0dancer 2013-11-06 14:59:59

+2

@ disc0dancer - 可能因爲瀏覽器已經有了'clientSize'（畢竟，它是視口），但需要在重新整理文檔後計算'offsetHeight'？ – Oded 2013-11-06 15:02:23

+0

那麼webkit檢查員說，即使在詢問clientHeigh時，整個文檔也會出現迴流。 – disc0dancer 2013-11-06 15:21:11

43

Oded的答案是理論。但理論和現實並不總是相同的，至少不是對於javascript中的滾動操作可能是重要的元素，至少不是對於元素而言。

微軟在MSDN一個很好的形象：

ClientHeight, OffsetHeight, ScrollHeight

如果你有一個HTML網頁，其中顯示了一個垂直滾動條人們會認爲無論是<BODY>或<HTML>元素有一個如圖所示，ScrollHeight geler比OffsetHeight更高。所有舊版本的Internet Explorer都是如此。

但它不適用於Internet Explorer 11而不適用於Firefox 36. 至少在這些瀏覽器中，OffsetHeight與ScrollHeight幾乎相同，這是錯誤的。

雖然OffsetHeight可能是錯誤的，但ClientHeight始終是正確的。

嘗試在不同的瀏覽器下面的代碼，你會看到：

<!DOCTYPE html> 
<html> 
<body> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<script> 
    document.write("Body off: " + document.body.offsetHeight 
      + "<br>Body cli: " + document.body.clientHeight 
      + "<br>Html off: " + document.body.parentElement.offsetHeight    
      + "<br>Html cli: " + document.body.parentElement.clientHeight); 
</script> 
</body> 
</html>

雖然舊的Internet Explorer中顯示正確：

Body off: 1197 
Body cli: 1197 
Html off: 878 
Html cli: 874

從Firefox和Internet Explorer 11的輸出是：

Body off: 1260 
Body cli: 1260 
Html off: 1276 // this is completely wrong 
Html cli: 889

這裏清楚地顯示了offsetHeight是錯誤的。 OffsetHeight和ClientHeight應該只相差幾個像素或者相同。

請注意，ClientHeight和的offsetHeight也可以不同極其對於那些不喜歡例如<FORM>其中的offsetHeight可能是形式的實際尺寸，同時ClientHeight可以是零可見的元素。

來源

2015-07-15 20:03:30 Elmue

相關問題

 相關問題