HTML DOM clientWidth 属性
实例
获取 <div> 元素的高度和宽度,包括填充:
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";
亲自试一试 »
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";
页面下方有更多实例。
定义和用法
clientWidth 属性返回元素的可视宽度(以像素为单位),包括填充,但不包括边框、滚动条或边距。
之所以指定 "可视" 是因为如果元素的内容比元素的实际宽度宽,则此属性将只返回可见的宽度(请参阅"更多示例")。
注释: 要理解这个属性,您必须理解 CSS 框模型。
提示: 此属性通常与 clientHeight 属性一起使用。
提示: 使用 offsetHeight 和 offsetWidth 属性返回元素的可视高度和宽度,包括填充、边框和滚动条。
提示: 要向元素添加滚动条,请使用 CSS overflow 属性。
该属性是只读的。
浏览器支持
属性 | |||||
---|---|---|---|---|---|
clientWidth | Yes | Yes | Yes | Yes | Yes |
语法
element.clientWidth
技术细节
返回值: | 一个数字, 以像素为单位表示元素的可视宽度,包括填充 |
---|
更多实例
实例
此示例演示了 clientHeight/clientWidth 和 offsetHeight/offsetWidth 之间的差异:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
亲自试一试 »
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
实例
此示例演示了在元素中添加滚动条时, clientHeight/clientWidth 和 offsetHeight/offsetWidth 之间的区别:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
亲自试一试 »
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";