HTML - DOM 元素 clientHeight 属性

**clientHeight** 属性用于获取元素的内部高度，包括内边距，但不包括边距、边框或滚动条宽度。它对动态布局、滚动行为和响应式设计很有用，并且是一个只读属性。

语法

element.clientHeight;

返回值

此属性返回一个数字（以像素为单位），表示元素的可视高度。

HTML DOM 元素“clientHeight”属性的示例

以下是一些示例，说明了在各种场景中使用 clientHeight 属性。

获取元素的高度

此示例使用 clientHeight 属性检索 id 为“box”的**<div>**元素的高度。它更新容器以显示计算出的 div 高度。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        #box {
            width: 200px;
            height: 150px;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="box">
        <p>This box has some content.</p>
        <p>Its clientHeight is <span id="heightDisplay">
        </span> pixels.
        </p>
    </div>

    <script>
        var box = document.getElementById("box");
        var clientHeight = box.clientHeight;
        document.getElementById("heightDisplay").textContent = clientHeight;
    </script>
</body>

</html>

获取 div 元素的高度和宽度

此示例说明了如何使用 clientHeight 属性检索 div 容器的特定高度和宽度。为了获取宽度，我们使用了**clientWidth**属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        #container {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="container">
        <p>
            This is a container with some content.
        </p>
        <p>
            Its dimensions will be displayed below.
        </p>
    </div>

    <div id="output">
        <h2>Container Dimensions:</h2>
        <ul>
            <li>Width: <span id="width"></span> pixels</li>
            <li>Height:<span id="height"></span> pixels</li>
        </ul>
    </div>

    <script>
        {
            document.addEventListener
            ("DOMContentLoaded", function() {

                var container = document.getElementById
                ("container");
                document.getElementById("width").textContent=
                container.clientWidth;
                document.getElementById("height").textContent
                =container.clientHeight;
            });
        }
    </script>
</body>

</html>

调整动态布局

此示例通过使用 clientHeight 属性将内容的高度调整为零或其自然高度来切换内容的可见性。

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: red;
            height: 30px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <br><br>
    <button onclick="toggleVisibility()">
    Toggle Visibility
    </button>
    <br><br>
    <div id="content" >

    </div>
    <script>
        function toggleVisibility() {

            var content = 
            document.getElementById("content");
            if (content.clientHeight > 0) {
                content.style.height = "0"; 
            } else {
                content.style.height = "30px"; 
            }
        }
    </script>
</body>

</html>

支持的浏览器

属性
clientHeight	是	是	是	是	是

html_dom_element_reference.htm

打印页面