Chiều rộng của phần tử HTML DOM
Ví dụ
Lấy chiều cao và chiều rộng của "myDIV", bao gồm cả phần đệm:
const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Thuộc tính clientWidth
trả về chiều rộng có thể xem được của một phần tử tính bằng pixel, bao gồm phần đệm nhưng không trả về đường viền, thanh cuộn hoặc lề.
Thuộc tính clientWidth
chỉ đọc.
Cú pháp
element .clientWidth
Giá trị trả về
Kiểu | Sự miêu tả |
Con số | Chiều rộng có thể xem được của một phần tử (tính bằng pixel) bao gồm cả phần đệm. |
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";
Hãy tự mình thử »Với 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";
Hãy tự mình thử »Hỗ trợ trình duyệt
element.clientWidth
được hỗ trợ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | Yes |