HTML DOM borderImageSource प्रॉपर्टी का उपयोग किसी तत्व के लिए बॉर्डर इमेज के रूप में उपयोग की जाने वाली इमेज के स्रोत को सेट या प्राप्त करने के लिए किया जाता है।
सिंटैक्स निम्नलिखित है:
borderImageSource प्रॉपर्टी सेट करना:
object.style.borderImageSource = "none|image|initial|inherit"
उपरोक्त प्रॉपर्टी निम्नलिखित हैं:
| मान | विवरण |
|---|---|
| None | इसका मतलब है कि कोई इमेज उपयोग नहीं की जाएगी। यदि निर्दिष्ट हो तो यह बॉर्डर शैली लागू करेगा। |
| Image | बॉर्डर के रूप में उपयोग की जाने वाली इमेज का पथ देने के लिए। बॉर्डर के रूप में उपयोग की जाने वाली इमेज का पथ। |
| fill | बॉर्डर-इमेज के मध्य भाग को संरक्षित करने के लिए उपयोग किया जाता है। |
| Initial | इस प्रॉपर्टी को डिफ़ॉल्ट मान पर सेट करने के लिए। |
| Inherit | मूल तत्व के प्रॉपर्टी मान को विरासत में लेने के लिए। |
आइए borderImageSource प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <head> <style> #DIV1 { width: 400px; margin: 15px; padding: 10px; border: 20px solid transparent; border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg"); border-image-slice: 30; } </style> <script> function changeBorderImage(){ document.getElementById("DIV1").style.borderImageSource="url('https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')"; document.getElementById("Sample").innerHTML="बॉर्डर इमेज अब बदल गई है"; } </script> </head> <body> <div id="DIV1">यह div के अंदर कुछ नमूना टेक्स्ट है</div> <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त div की बॉर्डर इमेज बदलें</p> <button onclick="changeBorderImage()">बॉर्डर इमेज बदलें</button> <p id="Sample"></p> </body> </html>आउटपुट
बॉर्डर इमेज बदलें बटन पर क्लिक करने पर:
उपरोक्त उदाहरण में:
हमने "DIV1" आईडी के साथ एक div बनाया है जिस पर संबंधित CSS शैली लागू है और इसमें कुछ टेक्स्ट है। हमने CSS शैली में border-image-source प्रॉपर्टी का उपयोग करके बॉर्डर इमेज निर्दिष्ट की है और प्रॉपर्टी मान के रूप में इमेज URL निर्दिष्ट किया है:
#DIV1 { width: 400px; margin: 15px; padding: 10px; border: 20px solid transparent; border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg "); border-image-slice: 30; } <div id="DIV1">यह div के अंदर कुछ नमूना टेक्स्ट है</div>हमने फिर एक बटन बॉर्डर इमेज बदलें बनाया जो उपयोगकर्ता द्वारा क्लिक किए जाने पर changeBorderImage() मेथड को निष्पादित करेगा:
<button onclick="changeBorderImage()">बॉर्डर इमेज बदलें</button>
changeBorderImage() getElementById() मेथड का उपयोग करके DIV1 तत्व को प्राप्त करता है और इसके borderImageSource प्रॉपर्टी मान को प्राप्त करता है। फिर यह url मेथड में URL मान निर्दिष्ट करके इसे इमेज URL असाइन करता है। फिर यह इस परिवर्तन को दर्शाने वाला इच्छित संदेश "Sample" आईडी वाले पैराग्राफ में इसके innerHTML प्रॉपर्टी का उपयोग करके प्रदर्शित करता है:
function changeBorderImage(){ document.getElementById("DIV1").style.borderImageSource="url('https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')"; document.getElementById("Sample").innerHTML="बॉर्डर इमेज अब बदल गई है"; }
