HTML DOM clientWidth 属性

clientWidth 属性是 HTML DOM 中的一个属性，它返回元素的内部宽度，不包括边框、滚动条和外边距。该属性常用于获取元素的可视区域宽度。

语法

element.clientWidth;

• element 是指你想要获取 clientWidth 的 HTML 元素。

返回值

clientWidth 返回一个整数值，表示元素的内部宽度（以像素为单位）。这个值包括元素的 padding，但不包括边框、滚动条或外边距。

示例

以下示例展示了如何使用 clientWidth 获取元素的内部宽度：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>clientWidth 示例</title>
    <style>
        .example {
            width: 300px;
            height: 200px;
            padding: 10px;
            border: 5px solid black;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="exampleDiv" class="example">
        这是一个示例文本。
    </div>
    <script>
        var exampleDiv = document.getElementById('exampleDiv');
        console.log(exampleDiv.clientWidth); // 输出：320
    </script>
</body>
</html>

在这个示例中，.example 类的元素的内部宽度为 320 像素。这是因为元素的宽度为 300 像素，加上两边各 10 像素的 padding，总共有 20 像素的 padding，因此 clientWidth 返回 320 像素。

注意事项

• clientWidth 不包括元素的边框、滚动条和外边距。
• 如果元素没有 CSS 定义的宽度，clientWidth 将返回 0。
• clientWidth 是只读属性，不能通过脚本修改其值。

其他相关属性

• offsetWidth: 返回元素的布局宽度，包括边框、内边距和滚动条（如果存在）。
• scrollWidth: 返回元素的完整宽度，包括不在视图中的部分。
• offsetLeft 和 offsetTop: 返回元素相对于其 offsetParent 的偏移量。
• getBoundingClientRect(): 返回元素的大小及其相对于视口的位置。

这些属性共同提供了丰富的信息，帮助开发者更准确地控制和操作页面上的元素。