HTML DOM borderImageRepeat प्रॉपर्टी का उपयोग यह परिभाषित करने के लिए किया जाता है कि बॉर्डर इमेज में इमेज स्लाइस कैसे दोहराए जाते हैं। यह सेट या प्राप्त करता है कि borderImage को गोल किया जाना चाहिए, दोहराया जाना चाहिए या फैलाया जाना चाहिए।
सिंटैक्स
borderImageRepeat प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.borderImageRepeat = "stretch|repeat|round|initial|inherit"
मान
प्रॉपर्टी मानों को निम्नानुसार समझाया गया है:
| क्रमांक | मान एवं विवरण |
|---|---|
| 1 | Stretch यह छवि को क्षेत्र भरने के लिए फैलाता है। यह डिफ़ॉल्ट मान है। |
| 2 | Repeat यह छवि को क्षेत्र भरने के लिए दोहराता है। |
| 3 | Round छवि आमतौर पर क्षेत्र भरने के लिए दोहराई जाती है और यदि यह पूरे नंबर बार क्षेत्र नहीं भरती है तो इसे रीस्केल किया जाता है। |
| 4 | Space round के समान लेकिन यदि छवि पूरे नंबर बार नहीं दोहराई जाती है तो टाइल्स के चारों ओर स्पेस वितरित किया जाता है। |
| 5 | initial इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। |
| 6 | inherit पैरेंट प्रॉपर्टी मान को विरासत में लेने के लिए। |
उदाहरण
borderImageRepeat प्रॉपर्टी का एक उदाहरण देखते हैं:
<!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>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
COLLAPSE BORDER बटन पर क्लिक करने पर:
