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

phần tử.clientHeight;

Ví dụ

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

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

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

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

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

130

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:

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

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

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

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

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

Ví dụ

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

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

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

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

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

0

Xem thêm

thuộc tính clientWidth,
chứa chiều rộng của phần tử bên trong đường viền
phương thức getComputedStyle,
lấy giá trị thuộc tính CSS của phần tử