HTML DOM clientWidth 属性
htmlweb developmentfront end technology更新于 2025/9/23 7:08:17
HTML DOM clientWidth 属性用于获取 HTML 元素的可视宽度。此宽度包含内边距 (padding)，但不包括边框、滚动条和外边距。即使内容超出元素，它也只返回元素宽度。
语法
以下是 clientWidth 属性的语法 −
element.clientWidth
示例
让我们看一个 HTML DOM clientWidth 属性的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
#divStyle {
width: 200px;
height: 200px;
padding: 10px;
margin: 15px;
border: 5px solid blue;
background-color: lightgreen;
}
</style>
</head>
<body>
<p>Click the below button to get the widhth of the div</p>
<button onclick="getWidth()">GET WIDTH</button>
<div id="divStyle">
<b>A sample div</b>
</div>
<p id="Sample"></p>
<script>
function getWidth() {
var x = document.getElementById("divStyle");
var txt = "Width including padding: " + x.clientWidth + "px";
document.getElementById("Sample").innerHTML = txt;
}
</script>
</body>
</html>
输出
这将产生以下输出 −
点击"获取宽度 −"
在上面的例子中 −
我们创建了一个 id 为 “styleDIV” 的 div，并使用其 id 为其应用了样式。
#divStyle {
width: 200px;
height: 200px;
padding: 10px;
margin: 15px;
border: 5px solid blue;
background-color: lightgreen;
}
The div −
<div id="divStyle"> <b>A sample div</b> </div>
然后，我们创建了一个按钮"GET WIDTH"，当点击时，它将执行 getWidth() 方法。
<button onclick="getWidth()">GET WIDTH</button>
getWidth() 方法使用 getElementById() 方法获取 <div> 元素，并将其赋值给变量 x。然后，使用 <div> 上的 clientWidth 属性获取其宽度，并在添加一些文本后将其赋值给变量 txt。然后，使用段落的 innerHTML 属性并将 txt 变量赋值给它，txt 中的文本将显示在段落内部 −
function getWidth() {
var x = document.getElementById("divStyle");
var txt = "Width including padding: " + x.clientWidth + "px";
document.getElementById("Sample").innerHTML = txt;
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
