HTML DOM Element clientWidth 屬性

定義和用法

clientWidth 屬性返回元素的可視寬度，包括內邊距，但不包括邊框、滾動條或外邊距，以像素計。

clientWidth 屬性是只讀的。

請參閱：CSS 框模型教程

另請參閱：

clientHeight 屬性

clientTop 屬性

clientLeft 屬性

offsetHeight 屬性

offsetWidth 屬性

如需將滾動條添加到元素，請使用 CSS overflow 屬性。

實例

例子 1

獲取 "myDIV" 的高度和寬度，包括內邊距：

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

親自試一試

例子 2

例子 2：clientHeight/clientWidth 與 offsetHeight/offsetWidth 的差別

無滾動條：

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

親自試一試

有滾動條：

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

親自試一試

語法

element.clientWidth

返回值

類型 描述
數值 元素的可視寬度（以像素計），包括內邊距。

瀏覽器支持

所有瀏覽器都支持 element.clientWidth：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持