คุณสมบัติ borderImageRepeat ของ HTML DOM ใช้กำหนดว่าสไลด์ของภาพขอบ (border image) จะทำซ้ำอย่างไร ตั้งค่าหรือรับว่า borderImage ควรเป็น rounded, repeated หรือ stretched
ไวยากรณ์ (Syntax)
object.style.borderImageRepeat = "stretch|repeat|round|initial|inherit"
ค่าที่ใช้ได้ (Values)
| ลำดับ | ค่าและคำอธิบาย |
|---|---|
| 1 | stretch ทำให้ภาพยืดเติมพื้นที่ เป็นค่าเริ่มต้น |
| 2 | repeat ทำให้ภาพทำซ้ำเพื่อเติมพื้นที่ |
| 3 | round ภาพทำซ้ำปกติ แต่จะปรับขนาด (rescale) หากไม่เติมพื้นที่ด้วยจำนวนเต็ม |
| 4 | space เหมือน round แต่หากภาพไม่ทำซ้ำครบจำนวนเต็ม ช่องว่างรอบไทล์จะถูกกระจาย |
| 5 | initial ตั้งค่าคุณสมบัติให้เป็นค่าเริ่มต้น |
| 6 | inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพาเรนต์ |
ตัวอย่าง (Example)
<!DOCTYPE html> <html> <head> <style>
#b1 {
border: 30px solid transparent;
padding: 5px;
border-image-source: url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structurealgorithm.jpg");
border-image-repeat: repeat;
border-image-slice: 30;
}
</style>
<script>
function changeBorderRepeat(){
document.getElementById("b1").style.borderImageRepeat="stretch";
document.getElementById("Sample").innerHTML="The border image will now be stretched";
}
</script> </head>
<body>
<h2>Demo Heading</h2>
<p id="b1">This is some random text inside the paragraph. Here is another line in this paragraph</p>
<p>Change the above div border image repeat property by clicking the below button</p>
<button onclick="changeBorderRepeat()">Change Border Repeat</button>
<p id="Sample"></p>
</body> </html>
ผลลัพธ์ (Output)
ผลลัพธ์ที่ได้:
เมื่อคลิกปุ่ม COLLAPSE BORDER:
