คุณสมบัติ borderTop ของ HTML DOM Style: Shorthand ขอบบน

คุณสมบัติ borderTop เป็น shorthand property สำหรับกำหนดหรือดึงค่าของขอบด้านบนครบทุกอย่าง: border-top-width, border-top-style, border-top-color

ไวยากรณ์ (Syntax)

object.style.borderTop = "width style color|initial|inherit"

พารามิเตอร์

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

<!DOCTYPE html>
<html>
<head>
<style>
  #P1 {
    border-top: 4px solid magenta;
    font-size: 1.5rem;
    padding-top: 10px;
  }
</style>
<script>
  function changeBorderTop() {
    document.getElementById("P1").style.borderTop = "9px dashed red";
    document.getElementById("Sample").innerHTML = "ขอบบนของย่อหน้าถูกเปลี่ยนเป็น 9px dashed red แล้ว";
  }
</script>
</head>
<body>
<p id="P1">นี่คือข้อความตัวอย่างภายในย่อหน้า นี่คือบรรทัดที่สองของข้อความตัวอย่าง</p>
<p>คลิกปุ่มเพื่อเปลี่ยนคุณสมบัติขอบบนของย่อหน้าด้านบน</p>
<button onclick="changeBorderTop()">เปลี่ยนขอบบน</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: ขอบบน 4px solid magenta
หลัง: ขอบบน 9px dashed red

ลำดับค่า (Value Order)

ลำดับไม่บังคับ แต่แนะนำ: width style color

/* เทียบเท่ากันทั้งหมด */
border-top: 2px solid red;
border-top: solid 2px red;
border-top: red solid 2px;

คุณสมบัติ Shorthand อื่นๆ

แนวทางปฏิบัติที่ดี

• ใช้ shorthand ลดโค้ด เพิ่มความอ่านง่าย
• ระบุ style เสมอ (none = ไม่มีขอบ)
• เปลี่ยนแค่บางค่า ใช้ longhand property