关于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>