ไคลเอนต์ HTML DOM คุณสมบัติความสูง

คุณสมบัติ HTML DOM clientHeight ใช้เพื่อรับความสูงที่สามารถดูได้ขององค์ประกอบ HTML ความสูงนี้รวมถึงการเติมแต่ไม่รวมเส้นขอบ แถบเลื่อน และระยะขอบ โดยจะคืนค่าความสูงขององค์ประกอบแม้ว่าเนื้อหาจะล้นจากองค์ประกอบก็ตาม

สามารถคำนวณได้เป็น −

CSS height+ CSS padding – border –scrollbar(horizontal) – margins

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติ clientHeight -

element.clientHeight

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติ HTML DOM clientHeight -

<!DOCTYPE html>
<html>
<head>
<style>
#styleDIV {
   height: 250px;
   padding: 10px;
   margin: 15px;
   border: 2px solid blue;
   background-color: lightgreen;
   text-align:center;
}
</style>
</head>
<body>
<p>Click the below button to get the height of the div, including padding.</p>
<button onclick="heightDiv()">GET HEIGHT</button>
<div id="styleDIV">
<b>A sample div</b>
</div>
<p id="Sample"></p>
<script>
   function heightDiv() {
      var x = document.getElementById("styleDIV");
      var txt = "Height including padding = " + x.clientHeight ;
      document.getElementById("Sample").innerHTML = txt;
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

ไคลเอนต์ HTML DOM คุณสมบัติความสูง

เมื่อคลิกปุ่ม GET HEIGHT -

ไคลเอนต์ HTML DOM คุณสมบัติความสูง

ในตัวอย่างข้างต้น −

เราได้สร้าง div ด้วย id “styleDIV” และมีสไตล์ที่ใช้กับ id -

#styleDIV {
   height: 250px;
   padding: 10px;
   margin: 15px;
   border: 2px solid blue;
   background-color: lightgreen;
   text-align:center;
}
<div id="styleDIV">
<b>A sample div</b>
</div>

จากนั้นเราได้สร้างปุ่ม GET HEIGHT ที่จะรันเมธอด heightDiv() เมื่อคลิก -

<button onclick="heightDiv()">GET HEIGHT</button>

heightDiv() รับองค์ประกอบ

โดยใช้เมธอด getElementById() และกำหนดให้กับตัวแปร x จากนั้นใช้คุณสมบัติ clientHeight บน

เราได้ความสูงและหลังจากต่อท้ายข้อความที่กำหนดให้กับตัวแปร txt ข้อความภายใน txt จะแสดงในย่อหน้าโดยใช้คุณสมบัติ innerHTML ในย่อหน้าและกำหนดตัวแปร txt ให้กับมัน -

function heightDiv() {
   var x = document.getElementById("styleDIV");
   var txt = "Height including padding = " + x.clientHeight ;
   document.getElementById("Sample").innerHTML = txt;
}