คุณสมบัติ HTML DOM borderImageOutset ใช้สำหรับการตั้งค่าหรือคืนค่าโดยที่พื้นที่รูปภาพพื้นหลังขยายกล่องเส้นขอบองค์ประกอบ ด้วยการใช้ค่าบน ซ้าย ขวา และล่าง เราสามารถระบุจำนวนภาพพื้นหลังที่จะขยายจากเส้นขอบขององค์ประกอบตามลำดับ
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ borderImageOutset -
object.style.borderImageOutset = "length|number|initial|inherit"
ค่าคุณสมบัติอธิบายได้ดังนี้ -
| ค่า | คำอธิบาย |
|---|---|
| ความยาว | สำหรับกำหนดว่ารูปภาพจะขยายจากกรอบกรอบเท่าใด ค่าเริ่มต้นถูกตั้งค่าเป็น 0 นั่นคือไม่ขยายเกินกรอบ |
| จำนวน | สำหรับการกำหนดค่าตัวเลขที่เป็นจำนวนเต็มของความกว้างของเส้นขอบ |
| เริ่มต้น | สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | หากต้องการรับค่าคุณสมบัติหลัก |
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติ borderImageOutset -
<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border: 20px solid transparent;
margin: 20px;
border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30
round;
border-image-outset: 5px;
background-color: lightgreen;
}
</style>
<script>
function changeBottomOutset(){
document.getElementById("P1").style.borderImageOutset="20px";
document.getElementById("Sample").innerHTML="The border image outset is now
increased";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p id="P1"> This is a sample paragraph containing some text. This paragraph is created only for the sake of this example</p>
<p>Change the above div border image outset by clicking the below button</p>
<button onclick="changeBottomOutset()">Change Bottom Outset</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม "เปลี่ยนจุดเริ่มต้น" -
