วิธีตั้งค่าคุณสมบัติขอบด้านล่างทั้งหมดในบรรทัดเดียวด้วย JavaScript

บทนำ

Property borderBottom เป็น shorthand สำหรับตั้งค่า border-bottom-width, border-bottom-style, และ border-bottom-color พร้อมกันในคำสั่งเดียว

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: 2px dashed blue;
      width: 120px;
      height: 120px;
    }
  </style>
</head>
<body>
  <button onclick="display()">ตั้งค่าขอบล่าง</button>
  <div id="box">
    <p>Demo Text</p>
    <p>Demo Text</p>
  </div>
  <script>
    function display() {
      document.getElementById("box").style.borderBottom = "thin dashed #000000";
    }
  </script>
</body>
</html>

รูปแบบ Syntax

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

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

// ขอบล่าง 3px เส้นสองเส้น สีน้ำเงิน
element.style.borderBottom = "3px double blue";

// ขอบล่าง 1px เส้นทึบ สีแดง
element.style.borderBottom = "1px solid red";

// ไม่มีขอบล่าง
element.style.borderBottom = "none";

// ใช้งานร่วมกับขอบอื่นๆ
element.style.border = "1px solid gray";
element.style.borderBottom = "3px solid red"; // ทับซ้อนเฉพาะขอบล่าง

Properties ขอบด้านอื่นๆ

• borderTop - ขอบบน
• borderRight - ขอบขวา
• borderLeft - ขอบซ้าย
• border - ทั้ง 4 ด้าน

การใช้งานจริง

มักใช้สำหรับสร้าง underline ที่สวยงามกว่า text-decoration: underline หรือสร้างเส้นคั่นระหว่าง section

.section-divider {
  border-bottom: 2px solid #333;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}