คุณสมบัติ HTML DOM clientHeight

คุณสมบัติ HTML DOM clientHeight ใช้สำหรับดึงความสูงที่มองเห็นได้ขององค์ประกอบ HTML ความสูงนี้รวม padding แต่ไม่นำขอบ สคролลบาร์ และระยะห่าง (margin) เข้าไป จะคืนค่าความสูงขององค์ประกอบเท่านั้น แม้เนื้อหาจะล้นออกมาจากองค์ประกอบก็ตาม

สามารถคำนวณได้ดังนี้ -

CSS height + CSS padding - border - scrollbar(แนวนอน) - 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>คลิกปุ่มด้านล่างเพื่อดึงความสูงของ div รวม 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>

ผลลัพธ์

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

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

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

เราสร้าง 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() ดึงองค์ประกอบ <div> โดยใช้เมธอด getElementById() และกำหนดให้ตัวแปร x จากนั้นใช้คุณสมบัติ clientHeight บน <div> เราได้ความสูงของมันและหลังจากผนวกข้อความบางส่วนกำหนดให้ตัวแปร txt ข้อความภายใน txt จึงถูกแสดงภายในย่อหน้าโดยใช้คุณสมบัติ innerHTML บนย่อหน้าและกำหนดตัวแปร txt ให้กับมัน -

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