คุณสมบัติ HTML DOM clientLeft ส่งกลับความกว้างของเส้นขอบด้านซ้ายขององค์ประกอบในหน่วยพิกเซล เป็นคุณสมบัติแบบอ่านอย่างเดียว คุณสมบัตินี้จะรวมความกว้างของแถบเลื่อนแนวตั้ง แต่จะไม่รวมระยะขอบด้านซ้ายหรือช่องว่างภายในด้านซ้ายขององค์ประกอบ
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติ 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>Click the below button to get border left width in pixels</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: " + elmnt.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 ที่จะรันเมธอด widthDiv() เมื่อคลิก -
<button onclick="widthDiv()"<LEFT WIDTH</button>
leftWidth () รับองค์ประกอบ
โดยใช้วิธี getElementById() และกำหนดให้กับตัวแปร x จากนั้นใช้คุณสมบัติ clientLeft บน
เราได้ความกว้างขอบด้านซ้ายและหลังจากผนวกข้อความบางส่วนจะกำหนดให้กับตัวแปร txt ข้อความภายใน txt จะแสดงในย่อหน้าโดยใช้คุณสมบัติ innerHTML ในย่อหน้าและกำหนดตัวแปร txt ให้กับมัน -
function leftWidth() {
var x= document.getElementById("styleDiv");
var txt = "Border left width: " + elmnt.clientLeft + "px";
document.getElementById("Sample").innerHTML = txt;
} 