คุณสมบัติ borderTopStyle ของ HTML DOM Style: รูปแบบขอบบน

คุณสมบัติ borderTopStyle ใช้สำหรับกำหนดหรือดึงค่ารูปแบบของขอบด้านบนขององค์ประกอบ

ไวยากรณ์ (Syntax)

object.style.borderTopStyle = value

ค่าที่รองรับ

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

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    width: 300px;
    height: 100px;
    border-top: 8px solid dodgerblue;
    border-top-style: groove;
  }
</style>
<script>
  function changeTopStyle() {
    document.getElementById("DIV1").style.borderTopStyle = "dashed";
    document.getElementById("Sample").innerHTML = "รูปแบบขอบบนถูกเปลี่ยนเป็น dashed แล้ว";
  }
</script>
</head>
<body>
<div id="DIV1">ข้อความตัวอย่าง</div>
<p>คลิกปุ่มเพื่อเปลี่ยนรูปแบบขอบบนของ div ด้านบน</p>
<button onclick="changeTopStyle()">เปลี่ยนรูปแบบขอบบน</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: ขอบบนแบบ groove (3D ร่อง)
หลัง: ขอบบนแบบ dashed (เส้นขีด)

การอธิบายโค้ด

1. สร้าง div id="DIV1" พร้อม CSS: border-top: 8px solid dodgerblue; border-top-style: groove;
2. สร้างปุ่ม เรียก changeTopStyle() เมื่อคลิก
3. ฟังก์ชันเปลี่ยน borderTopStyle เป็น "dashed" และแสดงข้อความ

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

• borderRightStyle, borderBottomStyle, borderLeftStyle
• borderStyle - Shorthand ทั้ง 4 ด้าน

หมายเหตุ

• ต้องมี border-top-width > 0 และ border-top-color ที่มองเห็นได้
• groove/ridge/inset/outset ต้องการสีที่มีคอนทราสต์เพื่อเห็นเอฟเฟกต์ 3D
• hidden ใช้ใน table เพื่อซ่อนขอบร่วม (border-collapse: collapse)