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

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

ไวยากรณ์

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

element.clientLeft

ตัวอย่าง

ลองดูตัวอย่างสำหรับคุณสมบัติ HTML DOM clientLeft -

<!DOCTYPE html> <html> <head> <style> #styleDiv { height: 200px; width: 200px; padding: 5px; margin: 10px; border-left: 10px solid blue; background-color: lightgreen; } </style> </head> <body> <p>คลิกปุ่มด้านล่างเพื่อดึงความกว้างขอบซ้ายในพิกเซล</p> <button onclick="leftWidth()">LEFT WIDTH</button> <div id="styleDiv"> </div> <p id="Sample"></p> <script> function leftWidth() { var x = document.getElementById("styleDiv"); var txt = "Border left width: " + x.clientLeft + "px"; document.getElementById("Sample").innerHTML = txt; } </script> </body> </html>

ผลลัพธ์

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

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

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

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

#styleDiv { height: 200px; width: 200px; padding: 5px; margin: 10px; border-left: 10px solid blue; background-color: lightgreen; } <div id="styleDiv"> </div>

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

<button onclick="leftWidth()">LEFT WIDTH</button>

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

function leftWidth() { var x = document.getElementById("styleDiv"); var txt = "Border left width: " + x.clientLeft + "px"; document.getElementById("Sample").innerHTML = txt; }