วิธีตั้งค่ารูปแบบเส้นขอบด้านบน (Top Border Style) ด้วย JavaScript

บทนำ

ในการเปลี่ยนรูปแบบเส้นขอบด้านบนขององค์ประกอบ HTML ผ่าน JavaScript เราใช้คุณสมบัติ borderTopStyle ของอ็อบเจกต์ style คุณสมบัตินี้รับค่ารูปแบบเส้นขอบเดียวกับ CSS เช่น solid, dashed, dotted, double, groove, ridge, inset, outset, none, หรือ hidden

ตัวอย่างโค้ดครบถ้วน

ตัวอย่างนี้สร้างกล่องสี่เหลี่ยมพร้อมปุ่มเปลี่ยนรูปแบบเส้นขอบบนเป็น dashed:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: thick solid gray;
      width: 300px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
  <div id="box">Demo Text</div>
  <button type="button" onclick="changeTopBorder()">เปลี่ยนเส้นขอบบนเป็น Dashed</button>

  <script>
    function changeTopBorder() {
      document.getElementById("box").style.borderTopStyle = "dashed";
    }
  </script>
</body>
</html>

ค่าที่ใช้ได้สำหรับ borderTopStyle

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

• borderTopWidth - ความหนาของเส้นขอบบน
• borderTopColor - สีของเส้นขอบบน
• borderTop - ตั้งค่าทั้งสามอย่างพร้อมกัน (shorthand)