วิธีตั้งค่าความกว้าง สไตล์ และสีขอบในบรรทัดเดียวด้วย JavaScript

บทนำ

Property border ใน JavaScript เป็น shorthand property ที่รวม border-width, border-style, และ border-color ไว้ในคำสั่งเดียว

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

<!DOCTYPE html>
<html>
<body>
  <button onclick="display()">ตั้งค่าขอบ</button>
  <div id="box">
    <p>Demo Text</p>
    <p>Demo Text</p>
  </div>
  <script>
    function display() {
      document.getElementById("box").style.border = "thick dashed #000000";
    }
  </script>
</body>
</html>

รูปแบบ Syntax

element.style.border = "width style color";

ค่าที่ใช้ได้แต่ละส่วน

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

// ขอบ 2px เส้นจุด สีแดง
element.style.border = "2px dotted red";

// ขอบ 1px เส้นทึบ สีเทาโปร่งใส 50%
element.style.border = "1px solid rgba(128,128,128,0.5)";

// ไม่มีขอบ
element.style.border = "none";

// ตั้งค่าแต่ละด้านแยกกัน
element.style.borderTop = "2px solid red";
element.style.borderRight = "1px dashed blue";
element.style.borderBottom = "3px double green";
element.style.borderLeft = "none";

ข้อดีของ shorthand

• โค้ดสั้น กระชับ
• อ่านง่าย บำรุงรักษาง่าย
• Performance ดีกว่าการตั้งค่าแยกกัน