HTML - DOM 元素 clientWidth 屬性

**clientWidth** 屬性返回元素的寬度，包括內邊距，但不包括邊距、邊框或捲軸寬度。它是一個只讀屬性，但對於響應式設計和佈局計算很有用。

語法

element.clientWidth;

返回值

此屬性返回一個數字（以畫素為單位），表示元素的可視寬度。

HTML DOM 元素“clientWidth”屬性的示例

以下是一些示例，說明了在各種場景中使用 clientWidth 屬性。

獲取元素的寬度

此示例檢索元素的 clientWidth 以顯示其內部寬度，不包括邊框和捲軸寬度。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .example-element {
            width: 390px;
            border: 2px solid #333;
            padding: 10px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div class="example-element" id="exampleElement">
        <h2>Example Element</h2>
        <p>This element has some content.</p>
    </div>

    <div id="output">
        <h2>Element Client Width:</h2>
        <p>Width: <span id="width"></span>pixels</p>
    </div>    
    <script>
        document.addEventListener
        ("DOMContentLoaded", function() {

            var element = document.getElementById
            ("exampleElement");
            var width = element.clientWidth;
            document.getElementById("width").textContent=
            width;
        });
    </script>
</body>

</html>

獲取特定元素的寬度

此示例演示如何訪問第一個**<header>** 元素的 clientWidth 以確定其內部寬度，不包括邊框和捲軸。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1 {
            border-top: 10px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1 id="firstHeader">First Header Element</h1>
    <div id="output">
        <h2>
        Top Border Width of the First Header Element:
        </h2>
        <p>Width: <span id="width"></span> pixels</p>
    </div>
            
    <script>
        document.addEventListener
        ("DOMContentLoaded", function() {

            var firstHeader = 
            document.getElementById("firstHeader");
            var outputWidth = 
            document.getElementById("width");

            function updateHeaderWidth() {
                var width = firstHeader.clientWidth;
                outputWidth.textContent = width;
            }
            // Initial update
            updateHeaderWidth();
            // Update on window resize
            window.addEventListener
            ("resize", updateHeaderWidth);
        });
    </script>
</body>

</html>

動態更新元素的寬度

此示例演示了當游標移動到容器上時，clientWidth 屬性如何動態調整和顯示元素在視口上的寬度。然後元素恢復到其原始寬度。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            background-color: lightblue;
            border: 2px solid blue;
            text-align: center;
            line-height: 100px;
            transition: width 0.3s ease;
        }
    </style>
</head>

<body>
    <div class="box" id="box">Resize Me!</div>
    <div id="output">Client Width: <span id="width">
    </span> pixels</div>    
    <script>
        document.addEventListener
        ("DOMContentLoaded", function() {
            var box = document.getElementById("box");
            var outputWidth = document.getElementById
            ("width");

            // Function to update client width
            function updateClientWidth() {
                var width = box.clientWidth;
                outputWidth.textContent = width;
            }

            // Initial update
            updateClientWidth();

            // Update on box resize (simulated)
            box.addEventListener
            ("mouseover", function() {
                box.style.width = (box.clientWidth + 20)+
                 "px";
                updateClientWidth();
            });

            box.addEventListener("mouseout", function(){
                box.style.width = "200px";
                updateClientWidth();
            });
        });
    </script>
</body>

</html>

支援的瀏覽器

屬性
clientWidth	是	是	是	是	是

html_dom_element_reference.htm

列印頁面