HTML DOM BorderImageSource प्रॉपर्टी का उपयोग किसी तत्व के लिए बॉर्डर इमेज के रूप में उपयोग की जाने वाली छवि के स्रोत को सेट करने या वापस करने के लिए किया जाता है।
−
. के लिए वाक्य रचना निम्नलिखित हैबॉर्डर इमेजसोर्स प्रॉपर्टी सेट करना -
object.style.borderImageSource = "none|image|initial|inherit"
उपरोक्त गुणों को इस प्रकार समझाया गया है -
| मान | <वें शैली ="पाठ-संरेखण:केंद्र;">विवरण|
|---|---|
| कोई नहीं | इसका मतलब है कि किसी भी छवि का उपयोग नहीं किया जाएगा। यदि वे निर्दिष्ट हैं तो यह सीमा शैलियों को लागू करेगा। |
| छवि | बॉर्डर के रूप में उपयोग की जाने वाली छवि का पथ देने के लिए। सीमा के रूप में उपयोग की जाने वाली छवि का पथ |
| बीमार | इसका उपयोग बॉर्डर-इमेज मध्य भाग को संरक्षित करने के लिए किया जाता है। |
| आरंभिक | इस गुण को डिफ़ॉल्ट मान पर सेट करने के लिए। |
| उत्तराधिकारी | मूल संपत्ति मूल्य को इनहेरिट करने के लिए। |
आइए बॉर्डर इमेजसोर्स प्रॉपर्टी के लिए एक उदाहरण देखें -
उदाहरण
<!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="The border image is now changed";
}
</script>
</head>
<body>
<div id="DIV1">This is some sample text inside div</div>
<p>Change the above div border image by clicking the below button</p>
<button onclick="changeBorderImage()">Change Border Image</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“बॉर्डर इमेज बदलें” . पर क्लिक करने पर बटन -
उपरोक्त उदाहरण में -
हमने आईडी "DIV1" के साथ एक div बनाया है जिसमें संबंधित सीएसएस शैली लागू होती है और इसमें कुछ टेक्स्ट होता है। हमने सीएसएस शैली में सीमा-छवि-स्रोत संपत्ति का उपयोग करके सीमा छवि निर्दिष्ट की है और छवि यूआरएल को संपत्ति मूल्य के रूप में निर्दिष्ट किया है -
#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">This is some sample text inside div</div> फिर हमने एक बटन बनाया “बॉर्डर इमेज बदलें ” जो उपयोगकर्ता द्वारा क्लिक किए जाने पर changeBorderImage () विधि को निष्पादित करेगा -
<button onclick="changeBorderImage()">Change Border Image</button>
changeBorderImage() getElementById() विधि का उपयोग करके DIV1 तत्व प्राप्त करता है और इसकी सीमा छवि स्रोत संपत्ति मान प्राप्त करता है। इसके बाद यह url विधि में url मान निर्दिष्ट करके इसे छवि url प्रदान करता है। इसके बाद यह अपनी आंतरिक HTML संपत्ति का उपयोग करके आईडी "नमूना" के साथ अनुच्छेद में इस परिवर्तन को इंगित करने वाला इच्छित संदेश प्रदर्शित करता है -
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="The border image is now changed";
}