Thuộc tính clientWidth của HTML DOM Element

Định nghĩa và cách sử dụng

clientWidth Thuộc tính trả về chiều rộng hiển thị của phần tử, bao gồm lề trong, nhưng không bao gồm viền, thanh cuộn hoặc lề ngoài, theo pixel.

clientWidth Thuộc tính là chỉ đọc.

Xem thêm:Hướng dẫn CSS Box Model

Xem thêm:

Thuộc tính clientHeight

Thuộc tính clientTop

Thuộc tính clientLeft

Thuộc tính offsetHeight

Thuộc tính offsetWidth

Nếu muốn thêm thanh cuộn vào phần tử, hãy sử dụng Thuộc tính overflow của CSS。

Mô hình

Ví dụ 1

Lấy chiều cao và chiều rộng của "myDIV", bao gồm lề trong:

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

Thử ngay

Ví dụ 2

Ví dụ 2: Sự khác biệt giữa clientHeight/clientWidth và offsetHeight/offsetWidth

Không có thanh cuộn:

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";

Thử ngay

Có thanh cuộn:

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";

Thử ngay

Cú pháp

element.clientWidth

Giá trị trả về

Loại Mô tả
Giá trị Chiều rộng hiển thị của phần tử (theo pixel), bao gồm lề trong.

Hỗ trợ trình duyệt

Tất cả các trình duyệt đều hỗ trợ element.clientWidth：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ