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

列印頁面