คุณสมบัติ clientHeight

คุณสมบัติ clientHeight เก็บความสูง ขององค์ประกอบภายในขอบเขตพร้อมกับ padding, แต่ไม่มี border และการเลื่อน

ไวยากรณ์

element.clientHeight;

ตัวอย่าง

มาหาขนาดขององค์ประกอบกัน:

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

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

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

ผลลัพธ์การทำงานของโค้ด:

130

ตัวอย่าง

หากองค์ประกอบมีการเลื่อนปรากฏขึ้น ความกว้างของ เนื้อหาก็จะลดลงตามความกว้างของแถบเลื่อน (ประมาณ 16px - ขึ้นอยู่กับเบราว์เซอร์, ระบบปฏิบัติการ, อุปกรณ์) ในตัวอย่างถัดไป ความกว้างขององค์ประกอบจะน้อยกว่า ที่คาดไว้:

<div id="elem">องค์ประกอบนี้มีการเลื่อน</div>

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

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

ผลลัพธ์การทำงานของโค้ด:

114 (ขึ้นอยู่กับเบราว์เซอร์)

ตัวอย่าง

หากองค์ประกอบถูกซ่อนอยู่ clientHeight จะมีค่าเท่ากับ 0:

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

#elem {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	display: none; /* องค์ประกอบที่ถูกซ่อน */
}

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

ผลลัพธ์การทำงานของโค้ด:

0

ดูเพิ่มเติม

คุณสมบัติ clientWidth,
ซึ่งเก็บความกว้างขององค์ประกอบภายในขอบเขต
เมธอด getComputedStyle,
ซึ่งรับค่า CSS property ขององค์ประกอบ