關于clientHeight、offsetHeight、scrollHeight

2024-07-21 02:04:37

字體：大中小

來源：轉載

供稿：網友

關于clientheight、offsetheight、scrollheight

window.screen.availwidth     返回當前屏幕寬度(空白空間)
window.screen.availheight     返回當前屏幕高度(空白空間)
window.screen.width     返回當前屏幕寬度(分辨率值)
window.screen.height     返回當前屏幕高度(分辨率值)
window.document.body.offsetheight;     返回當前網頁高度
window.document.body.offsetwidth;     返回當前網頁寬度

我們這里說說四種瀏覽器對 document.body 的 clientheight、offsetheight 和 scrollheight 的解釋。

這四種瀏覽器分別為ie（internet explorer）、ns（netscape）、opera、ff（firefox）。

clientheight
大家對 clientheight 都沒有什么異議，都認為是內容可視區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最后一個工具條以下到狀態欄以上的這個區域，與頁面內容無關。

offsetheight
ie、opera 認為 offsetheight = clientheight + 滾動條 + 邊框。
ns、ff 認為 offsetheight 是網頁內容實際高度，可以小于 clientheight。

scrollheight
ie、opera 認為 scrollheight 是網頁內容實際高度，可以小于 clientheight。
ns、ff 認為 scrollheight 是網頁內容高度，不過最小值是 clientheight。

簡單地說
clientheight 就是透過瀏覽器看內容的這個區域高度。
ns、ff 認為 offsetheight 和 scrollheight 都是網頁內容高度，只不過當網頁內容高度小于等于 clientheight 時，scrollheight 的值是 clientheight，而 offsetheight 可以小于 clientheight。
ie、opera 認為 offsetheight 是可視區域 clientheight 滾動條加邊框。scrollheight 則是網頁內容實際高度。

同理
clientwidth、offsetwidth 和 scrollwidth 的解釋與上面相同，只是把高度換成寬度即可。

=======================================================================

clientheight與offsetheight的區別

許多文章已經介紹了clientheight和offsetheight的區別，就是clientheight的值不包括scrollbar的高度，而offsetheight的值包括了scrollbar的高度。然而，clientheight和offsetheight的值到底由什么組成的呢？如何計算這兩個數的值？

1. clientheight和offsetheight的值由什么決定？

假如我們有以下的div，主要顯示的文字為"this is the main body of div"。

如上圖所示，clientheight的值由div內容的實際高度和css中的padding值決定，而offsetheight的值由div內容的實際高度，css中的padding值，scrollbar的高度和div的border值決定；至于css中的margin值，則不會影響clientheight和offsetheight的值。

2. css中的height值對clientheight和offsetheight有什么影響？

首先，我們看一下css中height定義的是什么的高度。如在本文最后部分“appendix示例代碼”（注：以下稱為“示例代碼”）中，innerdivclass的height值設定為50px，在ie下計算出來的值如下所示。也就是說，在ie里面，css中的height值定義了div包括padding在內的高度（即offsetheight的值）；在firefox里面，css中的height值只定義的div實際內容的高度，padding并沒有包括在這個值里面(70 = 50 + 10 * 2)。

in ie:
innerdiv.clientheight: 46
innerdiv.offsetheight: 50
outerdiv.clientheight: 0
outerdiv.offsetheight: 264

in firfox:
innerdiv.clientheight: 70
innerdiv.offsetheight: 74
outerdiv.clientheight: 348
outerdiv.offsetheight: 362

在上面的示例中，也許你會很奇怪，為什么在ie里面outerdiv.clientheight的值為0。那是因為示例代碼中，沒有定義outerdivclass的height值，這時，在ie里面，則clientheight的值是無法計算的。同樣，在示例代碼中，如果將innerdivclass中的height值去年，則innerdiv.clientheight的值也為0。(注：在firefox下不存在這種情況)。

如果css中height值小于div要顯示內容的高度的時候呢（當css中沒有定義overflow的行為時）？在ie里面，整個clientheight（或者offsetheight）的值并沒有影響，div會自動被撐大；而在firefox里面，div是不會被撐開的。如在示例代碼中，將innerdivclass的height值設為0，則計算結果如下所示。ie里面的div被撐開，其clientheight值等于內容的高度與padding*2的和；而firefox里面，文字將溢出div的邊界，其clientheight值正好是padding值的兩倍。

in ie:
innerdiv.clientheight: 38
innerdiv.offsetheight: 42
outerdiv.clientheight: 0
outerdiv.offsetheight: 256

in firefox:
innerdiv.clientheight: 20
innerdiv.offsetheight: 24
outerdiv.clientheight: 298
outerdiv.offsetheight: 312

appendix　示例代碼

<html>
<head>
<style type="text/css">......
.innerdivclass
{...}{...}{...}{
       color: red;
       margin: 37px;
       padding: 10px;
       border: 2px solid #000000;
       height: 50px;

}
.outerdivclass
{...}{...}{...}{
       padding: 100px;
       margin: 200px;
       border: 7px solid #000000;
}
</style>

       result.innerhtml = "innerdiv.clientheight: " + innerdiv.clientheight + "<br />";
       result.innerhtml += "innerdiv.offsetheight: " + innerdiv.offsetheight + "<br />";
       result.innerhtml += "outerdiv.clientheight: " + outerdiv.clientheight + "<br />";
       result.innerhtml += "outerdiv.offsetheight: " + outerdiv.offsetheight + "<br />";
}
</script>
</head>
<body>
<div id="outerdiv" class="outerdivclass">
<div class="innerdivclass" id="innerdiv">
hello world.
</div>
</div>
<p></p>
<div id="result">
</div>
<input type="button" onclick="checkclientheight()" text="click me" value="click me" />
</body>
</html>