Thuộc tính clientHeight

Thuộc tính clientHeight chứa chiều cao của phần tử bên trong đường viền cùng với padding, nhưng không có border và thanh cuộn.

Cú pháp

javascriptphần tử.clientHeight;

Ví dụ

Hãy tìm kích thước của phần tử:

css#elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 15px;
}

html<div id="elem"></div>

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientHeight);

Kết quả thực thi mã:

javascript130

Ví dụ

Nếu phần tử xuất hiện thanh cuộn thì chiều rộng nội dung sẽ giảm đi bằng chiều rộng của thanh cuộn (khoảng 16px - phụ thuộc vào trình duyệt, HĐH, thiết bị). Trong ví dụ tiếp theo chiều rộng của phần tử sẽ nhỏ hơn, so với dự kiến:

html<div id="elem">Phần tử này có thanh cuộn.</div>

css#elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 15px;
  overflow: scroll;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientHeight);

Kết quả thực thi mã:

javascript114 (phụ thuộc vào trình duyệt)

Ví dụ

Nếu phần tử bị ẩn, thì clientHeight sẽ bằng 0:

html<div id="elem"></div>

css#elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: none; /* phần tử bị ẩn */
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientHeight);

Kết quả thực thi mã:

javascript0

Xem thêm