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

คุณสมบัติ HTML DOM clientTop คืนค่าความกว้างของขอบบนขององค์ประกอบในพิกเซล เป็นคุณสมบัติแบบอ่านอย่างเดียว ระยะห่างบน (top margin) หรือ padding บนขององค์ประกอบไม่ได้ถูกรวมอยู่ในคุณสมบัตินี้

ไวยากรณ์

ไวยากรณ์สำหรับคุณสมบัติ clientTop ดังนี้ -

element.clientTop;

ตัวอย่าง

ลองดูตัวอย่างของคุณสมบัติ clientTop -

<!DOCTYPE html> <html> <head> <style> #styleDiv { height: 250px; font-size:35px; text-align:center; width: 400px; padding: 10px; margin: 15px; border-top: 15px solid blue; background-color: lightgreen; } </style> </head> <body> <p>คลิกปุ่มด้านล่างเพื่อดึงความกว้างขอบบนของ div ในพิกเซล</p> <button onclick="topWidth()">TOP WIDTH</button> <div id="styleDiv"> <b>A sample div</b> </div> <p id="Sample"></p> <script> function topWidth() { var x = document.getElementById("styleDiv"); var txt = "Border top width: " + x.clientTop + "px"; document.getElementById("Sample").innerHTML = txt; } </script> </body> </html>

ผลลัพธ์

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

เมื่อคลิก TOP WIDTH -

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

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

#styleDiv { height: 250px; font-size:35px; text-align:center; width: 400px; padding: 10px; margin: 15px; border-top: 15px solid blue; background-color: lightgreen; }

Div -

<div id="styleDiv"> <b>A sample div</b> </div>

เราสร้างปุ่ม TOP WIDTH ที่จะเรียกใช้เมธอด topWidth() เมื่อคลิก -

<button onclick="topWidth()">TOP WIDTH</button>

ฟังก์ชัน topWidth() ดึงองค์ประกอบ <div> โดยใช้เมธอด getElementById() และกำหนดให้ตัวแปร x จากนั้นใช้คุณสมบัติ clientTop บน <div> เราได้ความกว้างขอบบนในพิกเซลและหลังจากผนวกข้อความบางส่วนกำหนดให้ตัวแปร txt ข้อความภายใน txt จึงถูกแสดงภายในย่อหน้าที่มี id "Sample" โดยใช้คุณสมบัติ innerHTML และกำหนดตัวแปร txt ให้กับมัน -

function topWidth() { var x = document.getElementById("styleDiv"); var txt = "Border top width: " + x.clientTop + "px"; document.getElementById("Sample").innerHTML = txt; }