คุณสมบัติ clientHeight

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

ไวยากรณ์

javascriptelement.clientHeight;

ตัวอย่าง

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

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);

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

javascript130

ตัวอย่าง

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

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

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

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

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

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

ตัวอย่าง

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

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

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

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

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

javascript0

ดูเพิ่มเติม