วิธีตั้งค่าความกว้างของขอบซ้าย (Left Border Width) ด้วย JavaScript

บทนำ

Property borderLeftWidth ใน JavaScript DOM ใช้สำหรับตั้งค่าความหนาของขอบด้านซ้ายของ element แยกจากขอบด้านอื่นๆ ได้

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: thick solid gray;
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <div id="box">Demo Text</div>
  <br><br>
  <button type="button" onclick="display()">เปลี่ยนความกว้างขอบซ้าย</button>
  <script>
    function display() {
      document.getElementById("box").style.borderLeftWidth = "10px";
    }
  </script>
</body>
</html>

ค่าที่รับได้

Properties ที่เกี่ยวข้อง

• borderTopWidth - ขอบบน
• borderRightWidth - ขอบขวา
• borderBottomWidth - ขอบล่าง
• borderWidth - shorthand สำหรับทั้ง 4 ด้าน

ตัวอย่างเพิ่มเติม

// ตั้งค่าขอบซ้ายเป็น 2px แบบจุด
element.style.borderLeftWidth = "2px";
element.style.borderLeftStyle = "dotted";
element.style.borderLeftColor = "red";

// หรือใช้ shorthand
element.style.borderLeft = "2px dotted red";