คุณสมบัติ borderRight ของ HTML DOM Style: Shorthand ขอบขวา

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

ไวยากรณ์ (Syntax)

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

พารามิเตอร์

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

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

ผลลัพธ์

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

⚠️ ข้อผิดพลาดในโค้ดตัวอย่างเดิม (Fixed)

โค้ดเดิมมี pre class="result notranslate"><button... ที่ผิด - ได้แก้ไขแล้ว

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

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

/* เทียบเท่ากัน */
border-right: 2px solid red;
border-right: solid 2px red;
border-right: red solid 2px;

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

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

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