คุณสมบัติ borderImageWidth ของ HTML DOM Style: ความกว้างภาพขอบ

คุณสมบัติ borderImageWidth ใช้สำหรับกำหนดหรือดึงค่าความกว้างของภาพขอบ (border image) ขององค์ประกอบ ทำงานร่วมกับ border-image-source และ border-image-slice

ไวยากรณ์ (Syntax)

object.style.borderImageWidth = "number|%|auto|initial|inherit"

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

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

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    width: 400px;
    padding: 25px;
    border-style: solid;
    border-color: transparent;
    border-image-slice: 30;
    border-image-source: url("https://www.tutorialspoint.com/ethereum/images/ethereum-mini-logo.jpg");
    border-image-width: 10px;
  }
</style>
<script>
  function changeBorderWidth() {
    document.getElementById("DIV1").style.borderImageWidth = "30px";
    document.getElementById("Sample").innerHTML = "ความกว้างภาพขอบถูกเพิ่มเป็น 30px แล้ว";
  }
</script>
</head>
<body>
<div id="DIV1">HELLO</div>
<p>คลิกปุ่มเพื่อเพิ่มความกว้างภาพขอบของ div ด้านบน</p>
<button onclick="changeBorderWidth()">เปลี่ยนความกว้างขอบ</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: ภาพขอบกว้าง 10px
หลัง: ภาพขอบกว้าง 30px

คุณสมบัติ border-image ที่เกี่ยวข้อง

โครงสร้าง Border Image (9-slice)

ภาพขอบถูกแบ่งเป็น 9 ส่วน:

• 4 มุม (ไม่ยืดหด)
• 4 ขอบ (ยืดหดตามความยาว)
• 1 กลาง (แสดง/ซ่อนได้ด้วย fill)

หมายเหตุ

• ต้องกำหนด border-style ไม่ใช่ none และ border-width > 0
• ค่า number เป็นตัวคูณของ border-width ไม่ใช่พิกเซลโดยตรง
• รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด (IE11+ ต้องใช้ prefix)