定义和用法
clientWidth 属性是一个只读属性，它返回该元素的像素宽度，宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条，是一个整数，单位是像素 px。
内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。
注意： 要了解该属性，可以参阅 CSS 盒子模型。
提示: 该属性通常与 clientHeight 属性一起使用。
提示: 使用 offsetHeight 和 offsettWidth 属性返回元素的可见高度和宽度，包括内边距（padding）和边框（border）。
提示： 元素添加滚动条，可以使用 overflow 属性。
这是一个只读属性。
浏览器支持：
主要现代浏览器都支持
语法
element.clientWidth 技术细节
| 返回值： | 返回一个整数，表示该元素的像素宽度。 |
|---|
实例
获取 div 元素的宽度，包含内边距（padding）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#myDIV {
height: 250px;
width: 400px;
padding: 10px;
margin: 15px;
border: 5px solid red;
background-color: lightblue;
}
</style>
</head>
<body>
<p>击按钮获取 div 元素的高度</p>
<button onclick="myFunction()">点我</button>
<div id="myDIV">
<b>div 的样式信息:</b><br>
Height: 250px<br>
Width: 400px<br>
padding: 10px<br>
margin: 15px<br>
border: 5px<br>
<p id="demo"></p>
</div>
<script>
function myFunction() {
var elmnt = document.getElementById("myDIV");
var txt = "div 元素的高度，包含内边距（padding）: " + elmnt.clientHeight + "px<br>";
txt += "div 元素的宽度，包含内边距（padding）: " + elmnt.clientWidth + "px";
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>以下实例演示了 clientHeight/clientWidth 和 offsetHeight/offsetWidth 属性的区别：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#myDIV {
height: 250px;
width: 400px;
padding: 10px;
margin: 15px;
border: 5px solid red;
background-color: lightblue;
}
</style>
</head>
<body>
<p>点击按钮获取 div 的 clientHeight, clientWidth, offsetHeight 和 offsetWidth 属性值。</p>
<button onclick="myFunction()">点我</button>
<div id="myDIV">
<b>div 的样式信息:</b><br>
Height: 250px<br>
Width: 400px<br>
padding: 10px<br>
margin: 15px<br>
border: 5px<br>
<p id="demo"></p>
</div>
<script>
function myFunction() {
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "高度包含内边距（padding）: " + elmnt.clientHeight + "px<br>";
txt += "高度包含内边距（padding）和边框（border）: " + elmnt.offsetHeight + "px<br>";
txt += "宽度包含内边距（padding）: " + elmnt.clientWidth + "px<br>";
txt += "宽度包含内边距（padding）和边框（border）: " + elmnt.offsetWidth + "px";
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>以下实例演示了在元素添加滚动条后 clientHeight/clientWidth 和 offsetHeight/offsetWidth 属性的区别：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#myDIV {
height: 250px;
width: 400px;
padding: 10px;
margin: 15px;
border: 5px solid red;
background-color: lightblue;
overflow: auto;
}
#myDIV2 {
height: 250px;
width: 400px;
padding: 10px;
margin: 15px;
border: 5px solid red;
background-color: lightblue;
}
#content {
height: 800px;
width: 2000px;
background-color: lightyellow;
}
</style>
</head>
<body>
<p>在这个实例中，子 div 元素 (#content) 插入到第一个 div 中，由子 div 元素 比第父 div元素 (#myDIV) 大，
(子元素为 800x2500 ，父元素为 250x400), 所以我们使用了滚动条。</p>
<p>点击按钮获取 div 元素的 clientHeight, offsetHeight, clientWidth 和 offsetWidth 属性值。</p>
<button onclick="myFunction()">点我</button>
<p>请注意父 div 中的滚动条"得到"子 div 的右侧和底部内边距（padding），这导致父 div 中 clientHeight 和 clientWidth 的返回值低于另一个，而 offsetHeight 和 offsetWidth 不受此影响。
<div id="myDIV">
<div id="content"></div>
</div>
<div id="myDIV2">
<div id="content2"></div>
</div>
<script>
function myFunction() {
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "<b>div 的样式信息:</b><br>";
txt += "高度包含内边距（padding）: " + elmnt.clientHeight + "px<br>";
txt += "高度包含内边距（padding）、边框（border）及滚动条: " + elmnt.offsetHeight + "px<br>";
txt += "宽度包含内边距（padding）: " + elmnt.clientWidth + "px<br>";
txt += "宽度包含内边距（padding）、边框（border）及滚动条: " + elmnt.offsetWidth + "px";
document.getElementById("content").innerHTML = txt;
var elmnt2 = document.getElementById("myDIV2");
var txt2 = "";
txt2 += "<b>div2 的样式信息:</b><br>";
txt2 += "高度包含内边距（padding）: " + elmnt2.clientHeight + "px<br>";
txt2 += "高度包含内边距（padding）和边框（border）: " + elmnt2.offsetHeight + "px<br>";
txt2 += "宽度包含内边距（padding）: " + elmnt2.clientWidth + "px<br>";
txt2 += "宽度包含内边距（padding）和边框（border）: " + elmnt2.offsetWidth + "px";
document.getElementById("content2").innerHTML = txt2;
}
</script>
</body>
</html>作者：terry，如若转载，请注明出处：https://www.web176.com/javascriptbook/domtips/4358.html
支付宝 
微信 