คุณสมบัติ borderLeftWidth ใช้สำหรับกำหนดหรือดึงค่าความกว้างของขอบด้านซ้ายขององค์ประกอบ
ไวยากรณ์ (Syntax)
object.style.borderLeftWidth = "thin|medium|thick|length|initial|inherit"ค่าที่รองรับ
| ค่า | คำอธิบาย |
|---|---|
| thin | ขอบบาง (โดยปกติ ~1px) |
| medium | ขอบกลาง (ค่าเริ่มต้น ~3px) |
| thick | ขอบหนา (โดยปกติ ~5px) |
| length | ระบุความกว้างด้วยหน่วยความยาว (px, em, rem ฯลฯ) |
| initial | ตั้งค่ากลับเป็นค่าเริ่มต้น |
| inherit | สืบทอดจากองค์ประกอบพาเรนต์ |
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-left-width: 30px;
}
</style>
<script>
function changeLeftWidth() {
document.getElementById("DIV1").style.borderLeftWidth = "1px";
document.getElementById("Sample").innerHTML = "ความกว้างขอบซ้ายถูกลดลงเหลือ 1px แล้ว";
}
</script>
</head>
<body>
<div id="DIV1">ข้อความตัวอย่าง</div>
<p>คลิกปุ่มเพื่อเปลี่ยนความกว้างขอบซ้ายของ div ด้านบน</p>
<button onclick="changeLeftWidth()">เปลี่ยนความกว้างขอบซ้าย</button>
<p id="Sample"></p>
</body>
</html>ผลลัพธ์
ก่อน: ขอบซ้ายหนา 30px
หลัง: ขอบซ้ายบางเหลือ 1px
คุณสมบัติขอบด้านอื่นที่เกี่ยวข้อง
borderRightWidth- ขอบขวาborderTopWidth- ขอบบนborderBottomWidth- ขอบล่างborderWidth- Shorthand สำหรับทั้ง 4 ด้าน
แนวทางปฏิบัติที่ดี
- ใช้หน่วย
pxสำหรับการควบคุมที่แม่นยำ - หลีกเลี่ยงคำสำคัญ thin/medium/thick เพราะขนาดอาจแตกต่างในแต่ละเบราว์เซอร์
- ต้องกำหนด
border-left-styleให้ไม่ใช่ none ไม่ तोขอบจะไม่แสดง
