การทำความเข้าใจ clientHeight, offsetHeight และ scrollHeight ใน CSS

clientHeight

clientHeight ให้ค่าความสูงของอิลิเมนต์รวมถึง padding แต่ไม่รวม border, margin และความสูงของ scrollbar (หากแสดง)

offsetHeight

offsetHeight ให้ค่าความสูงของอิลิเมนต์รวมถึง vertical padding, top และ bottom borders แต่ไม่รวม margin

scrollHeight

scrollHeight ให้ค่าความสูงของอิลิเมนต์รวมถึง vertical padding และเนื้อหาที่ไม่มองเห็นบนหน้าจอเนื่องจาก overflow property

ตัวอย่างต่อไปนี้แสดงการใช้งาน clientHeight, offsetHeight และ scrollHeight

ตัวอย่าง clientHeight

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#parent { 
  margin-top: 10px; 
  height: 200px; 
  width: 200px; 
  overflow: auto; 
  margin: 20px; 
} 
#demo { 
  height: 250px; 
  padding: 20px; 
  background-color: beige; 
  border: 2px ridge red; 
} 
</style> 
</head> 
<body> 
<button onclick="getHeight()">Get Client Height</button> 
<div id="parent"> 
<div id="demo"> 
<ul> 
<li>a</li> 
<li>b</li> 
<li>c</li> 
</ul> 
</div> 
</div> 
<article id="display"></article> 
<script> 
function getHeight() { 
  let myItem = document.getElementById("demo"); 
  let y = myItem.clientHeight; 
  document.getElementById ("display").innerHTML = "Client Height is " + y + "px"; 
} 
</script> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

ตัวอย่าง offsetHeight

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#parent { 
  height: 180px; 
  width: 180px; 
  overflow: auto; 
  margin: 20px; 
} 
#demo { 
  height: 220px; 
  padding: 20px; 
  background-color: cornflowerblue; 
  border: 10px ridge red; 
  color: white; 
} 
</style> 
</head> 
<body> 
<button onclick="getHeight()">Get Offset Height</button> 
<div id="parent"> 
<div id="demo"> 
<ul> 
<li>a</li> 
<li>b</li> 
<li>c</li> 
</ul> 
</div> 
</div> 
<article id="display"></article> 
<script> 
function getHeight() { 
  let myItem = document.getElementById("demo"); 
  let y = myItem.offsetHeight; 
  document.getElementById ("display").innerHTML = "Offset Height is " + y + "px"; 
} 
</script> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

ตัวอย่าง scrollHeight

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#parent { 
  margin-top: 10px; 
  height: 200px; 
  width: 200px; 
  overflow: auto; 
  margin: 20px; 
} 
#demo { 
  height: 400px; 
  padding: 20px; 
  background-color: bisque; 
  border: 1px solid green; 
} 
</style> 
</head> 
<body> 
<button onclick="getHeight()">Get Scroll Height</button> 
<div id="parent"> 
<div id="demo"> 
<ul> 
<li></li> 
<li></li> 
<li></li> 
</ul> 
</div> 
</div> 
<article id="display"></article> 
<script> 
function getHeight() { 
  let myItem = document.getElementById("demo"); 
  let y = myItem.scrollHeight; 
  document.getElementById ("display").innerHTML = "Scroll Height is " + y + "px"; 
} 
</script> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้: