HTML DOM BorderImageRepeat प्रॉपर्टी का उपयोग यह परिभाषित करने के लिए किया जाता है कि बॉर्डर इमेज में इमेज स्लाइस को कैसे दोहराया जाता है। यह सेट या हो जाता है यदि सीमा छवि को गोल, दोहराया या बढ़ाया जाना चाहिए।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैBorderImageRepeat गुण सेट करना।
object.style.borderImageRepeat = "stretch|repeat|round|initial|inherit"
मान
संपत्ति के मूल्यों को इस प्रकार समझाया गया है -
<टेबल> <थेड>यह क्षेत्र को भरने के लिए छवि को फैलाता है। यह व्यतिक्रम मूल्य है।
इससे क्षेत्र को भरने के लिए छवि को दोहराया जाता है।
छवि को आमतौर पर क्षेत्र को भरने के लिए दोहराया जाता है और यदि यह क्षेत्र को पूरी संख्या से नहीं भरता है तो इसे फिर से बढ़ाया जाता है।
गोल के समान लेकिन अगर छवि को पूरी संख्या में दोहराया नहीं जाता है तो टाइल्स के आसपास की जगह वितरित की जाती है।
इस संपत्ति को प्रारंभिक मूल्य पर सेट करने के लिए।
मूल संपत्ति मूल्य प्राप्त करने के लिए
उदाहरण
आइए बॉर्डरइमेज रिपीट प्रॉपर्टी के लिए एक उदाहरण देखें -
<!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 बटन पर क्लिक करने पर -
