HTML DOM Element clientWidth 属性

定义和用法

clientWidth 属性返回元素的可视宽度，包括内边距，但不包括边框、滚动条或外边距，以像素计。

clientWidth 属性是只读的。

请参阅：CSS 框模型教程

另请参阅：

clientHeight 属性

clientTop 属性

clientLeft 属性

offsetHeight 属性

offsetWidth 属性

如需将滚动条添加到元素，请使用 CSS overflow ɗanin。

实例

例子 1

获取 "myDIV" 的高度和宽度，包括内边距：

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px
";
text += "clientWidth: " + element.clientWidth + "px";

亲自试一试

例子 2

例子 2：clientHeight/clientWidth 与 offsetHeight/offsetWidth 的差别

无滚动条：

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px
";
text += "offsetHeight: " + element.offsetHeight + "px
";
text += "clientWidth: " + element.clientWidth + "px
";
text += "offsetWidth: " + element.offsetWidth + "px";

亲自试一试

有滚动条：

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px
";
text += "offsetHeight: " + element.offsetHeight + "px
";
text += "clientWidth: " + element.clientWidth + "px
";
text += "offsetWidth: " + element.offsetWidth + "px";

亲自试一试

语法

element.clientWidth

返回值

类型 描述
数值 元素的可视宽度（以像素计），包括内边距。

Dukkunci ƙarancin

Dukkunci kai dukiya dukiya element.clientWidth：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Akwai Akwai Akwai Akwai Akwai Akwai