Question

事实：

clientHeight：返回元素的高度，包括填充

offsetHeight：返回元素的高度，包括填充，边框和滚动条

结论：

offsetHeight应返回的像素数多于clientHeight。 offsetHeight大于clientHeight。

问题：

当我在HTML代码上使用这两个属性时，它会从offsetHeight返回8，从clientHeight返回778。

为什么？ offsetHeight应该大于clientHeight，不应该吗？

那为什么它只有8个像素？这里发生了什么？

代码：

<!DOCTYPE html>

<html id = "foo">
    <body>
        <script>
            var element = document.getElementById('foo');

            var osHeight = element.offsetHeight;
            var cHeight = element.clientHeight;

            document.write("Offset Height is " + osHeight + "<br/>");
            document.write("Client Height is " + cHeight);
        </script>
    </body>
</html>

输出：

Offset Height is 8
Client Height is 778

Answer 1

clientHeight 属性对于 html 元素是特殊的。它返回浏览器客户区的高度，而不包含任何doctype的水平滚动条。

如果指定没有doctype ，则html元素的 clientHeight 属性在浏览器中包含不同的值。

细节：http://help.dottoro.com/ljcadejj.php

offsetHeight 属性对于 html 元素是特殊的。

它返回浏览器客户区的高度，而不包含 Internet Explorer 中的水平滚动条，就像html元素的clientHeight属性一样。

在Firefox，Opera，Google Chrome和Safari中，它会返回文档的高度。

详细信息：http://help.dottoro.com/ljuxqbfx.php

如果在css中设置*{padding:0px;margin:0px;}，则offsetHeight将返回0;

http://jsfiddle.net/ufxt5Lzq/1/

Answer 2

不是浏览器问题......？这是Maxthon 4.4.3.2000控制台的输出。我在这个页面上运行了代码。

Maxthon 4.4.3.2000

Answer 3

此处，客户端高度是浏览器窗口的高度。但由于您的html代码为空（即它没有任何内容），因此偏移高度为8，这只是<html>标记所占区域的高度。

Answer 4

正如此处的其他一些答案所述，您在没有样式自定义的情况下检查空白HTML元素的高度，因此clientHeight和offsetHeight将是相同的而不管。在加载文档并检查高度之后，才会插入您要写入元素的内容，因此会产生奇怪的结果。

看看this JSFiddle。我已经对包含内容和边框的元素设置了检查。你确实错误的是offsetHeight更大了。

如果你需要对元素的大小，高度或宽度进行检查，你需要在之后进行这些检查你操纵了innerHTML，或者你赢了＆＃39 ; t得到准确的结果，因为您要检查原始元素大小而不是操作元素大小。

CSS：

#foo {
    border: 3px solid #000;
    height: 24px;
    padding: 6px;
    margin: 6px;
    overflow: scroll;
}

HTML：

<div id="foo">
    Guess my height?<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
</div>

<div id="height"></div>

JS：

function writeLn(content) {
    document.getElementById('height').innerHTML += content + '<br />';
}

function showHeights() {
    var element = document.getElementById('foo');
    var osHeight = element.offsetHeight;
    var cHeight = element.clientHeight;

    writeLn('element.offsetHeight = ' + osHeight);
    writeLn('element.clientHeight = ' + cHeight);
}

showHeights();

为什么offsetHeight小于clientHeight？

4 个答案: