Thuộc tính clientHeight của phần tử HTML DOM

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

clientHeight Thuộc tính trả về chiều cao 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.

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

Xem thêm:Giáo trình CSS Box Model

Xem thêm:

Thuộc tính clientWidth

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ẫu

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ử nghiệm trực tiếp

Ví dụ 2: 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ử nghiệm trực tiếp

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ử nghiệm trực tiếp

Cú pháp

element.clientHeight

Giá trị trả về

Loại Mô tả
Số Chiều cao 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.clientHeight：

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