คุณสมบัติ HTML DOM borderImageWidth ใช้เพื่อกำหนดหรือรับความกว้างของรูปภาพเส้นขอบสำหรับองค์ประกอบ
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ borderImageWidth -
object.style.borderImageWidth = "number|%|auto|initial|inherit"
อธิบายคุณสมบัติข้างต้นดังนี้ −
| ค่า | คำอธิบาย |
|---|---|
| ความยาว | สำหรับอธิบายขนาดความกว้างของเส้นขอบเป็น px. |
| หมายเลข | สำหรับการอธิบายความกว้างของเส้นขอบเป็นทวีคูณของความกว้างของเส้นขอบที่สอดคล้องกันและค่าเริ่มต้นคือ 1 |
| % | สำหรับอธิบายออฟเซ็ตแนวนอนและแนวออฟเซ็ตสำหรับความกว้างของพื้นที่รูปภาพเส้นขอบ |
| อัตโนมัติ | ตั้งค่าความกว้างและความสูงที่สอดคล้องกับความกว้างและความสูงของรูปภาพ |
| เริ่มต้น | สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | การสืบทอดค่าคุณสมบัติหลัก |
ให้เราดูตัวอย่างคุณสมบัติ borderImageWidth -
ตัวอย่าง
<!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="The border image width is now increased";
}
</script>
</head>
<body>
<div id="DIV1">HELLO</div>
<p>Increase the above div border image width by clicking the below button</p>
<button onclick="changeBorderWidth()">Change Border Width</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
เมื่อคลิกที่ “เปลี่ยนความกว้างของเส้นขอบ” ปุ่ม −
