คุณสมบัติ borderLeft ของ HTML DOM Style: Shorthand ขอบซ้าย

คุณสมบัติ borderLeft เป็น shorthand property สำหรับกำหนดหรือดึงค่าของขอบด้านซ้ายครบทุกอย่างในคำสั่งเดียว ได้แก่ border-left-width, border-left-style, border-left-color

ไวยากรณ์ (Syntax)

object.style.borderLeft = "width style color|initial|inherit"

พารามิเตอร์

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
<style>
  #P1 {
    border-left: 4px solid magenta;
    font-size: 1.5rem;
    padding-left: 10px;
  }
</style>
<script>
  function changeBorderLeft() {
    document.getElementById("P1").style.borderLeft = "9px dashed red";
    document.getElementById("Sample").innerHTML = "ขอบซ้ายของย่อหน้าถูกเปลี่ยนเป็น 9px dashed red แล้ว";
  }
</script>
</head>
<body>
<p id="P1">นี่คือข้อความตัวอย่างภายในย่อหน้า นี่คือบรรทัดที่สองของข้อความตัวอย่าง</p>
<p>คลิกปุ่มเพื่อเปลี่ยนคุณสมบัติขอบซ้ายของย่อหน้าด้านบน</p>
<button onclick="changeBorderLeft()">เปลี่ยนขอบซ้าย</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: ขอบซ้าย 4px solid magenta
หลัง: ขอบซ้าย 9px dashed red

ลำดับของค่า (Value Order)

ลำดับไม่สำคัญ สามารถสลับได้ แต่แนะนำให้ใช้ลำดับมาตรฐาน: width style color

/* ทั้งหมดเทียบเท่ากัน */
border-left: 2px solid red;
border-left: solid 2px red;
border-left: red solid 2px;

คุณสมบัติ Shorthand อื่นๆ ที่เกี่ยวข้อง

แนวทางปฏิบัติที่ดี

• ใช้ shorthand เพื่อลดโค้ดและเพิ่มความอ่านง่าย
• ระบุ style เสมอ (ถ้าเป็น none ขอบจะหายไป)
• สำหรับการเปลี่ยนแค่บางค่า ใช้ longhand property แทน