คุณสมบัติ borderLeftStyle ของ HTML DOM Style: รูปแบบขอบซ้าย

คุณสมบัติ borderLeftStyle ใช้สำหรับกำหนดหรือดึงค่ารูปแบบของขอบด้านซ้ายขององค์ประกอบ

ไวยากรณ์ (Syntax)

object.style.borderLeftStyle = value

ค่าที่รองรับ

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

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    width: 300px;
    height: 100px;
    border-left: 8px solid dodgerblue;
    border-left-style: groove;
  }
</style>
<script>
  function changeLeftStyle() {
    document.getElementById("DIV1").style.borderLeftStyle = "dashed";
    document.getElementById("Sample").innerHTML = "รูปแบบขอบซ้ายถูกเปลี่ยนเป็น dashed แล้ว";
  }
</script>
</head>
<body>
<div id="DIV1">ข้อความตัวอย่าง</div>
<p>คลิกปุ่มเพื่อเปลี่ยนรูปแบบขอบซ้ายของ div ด้านบน</p>
<button onclick="changeLeftStyle()">เปลี่ยนรูปแบบขอบซ้าย</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: ขอบซ้ายแบบ groove (3D ร่อง)
หลัง: ขอบซ้ายแบบ dashed (เส้นขีด)

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

• borderRightStyle, borderTopStyle, borderBottomStyle
• borderStyle - Shorthand สำหรับทั้ง 4 ด้าน

หมายเหตุ

• ต้องกำหนด border-left-width > 0 และ border-left-color ให้เห็นขอบ
• ค่า groove, ridge, inset, outset ต้องการสีขอบที่ไม่ใช่ดำ/ขาวเพื่อให้เห็นเอฟเฟกต์ 3D
• ค่า hidden ใช้กับตาราง (table) เพื่อซ่อนขอบร่วมระหว่างเซลล์