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

打印页面