Phần tử DOM HTML clientWidth
❮ Đối tượng phần tửThí dụ
Lấy chiều cao và chiều rộng của "myDIV", bao gồm cả phần đệm:
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
Thêm ví dụ bên dưới.
Định nghĩa và Cách sử dụng
Thuộc clientWidth
tính trả về chiều rộng có thể xem của một phần tử tính bằng pixel, bao gồm cả phần đệm, nhưng không trả về đường viền, thanh cuộn hoặc lề.
Thuộc clientWidth
tính ở chế độ chỉ đọc.
Hướng dẫn:
Xem thêm:
Thuộc tính Element clientHeight
Thuộc tính phần tử offsetHeight
Thuộc tính Phần tử offsetWidth
Để thêm thanh cuộn vào một phần tử, hãy sử dụng thuộc tính tràn CSS .
Cú pháp
element.clientWidth
Giá trị trả lại
Loại | Sự miêu tả |
Số | Chiều rộng có thể xem 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 elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
Với một thanh cuộn:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
Hỗ trợ trình duyệt
element.clientWidth
được hỗ trợ trong tất cả các trình duyệt:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ Đối tượng phần tử