HTML DOM borderImageOutset प्रॉपर्टी का उपयोग उस मान को सेट या लौटाने के लिए किया जाता है जिससे बैकग्राउंड इमेज क्षेत्र एलिमेंट बॉर्डर बॉक्स से आगे बढ़ता है। top, left, right और bottom के लिए मानों का उपयोग करके हम निर्दिष्ट कर सकते हैं कि बैकग्राउंड इमेज एलिमेंट के संबंधित बॉर्डर से कितना आगे बढ़ेगी।
सिंटैक्स
निम्नलिखिक सिंटैक्स है -
borderImageOutset प्रॉपर्टी सेट करना -
object.style.borderImageOutset = "length|number|initial|inherit"
प्रॉपर्टी मान इस प्रकार समझाए गए हैं -
| मान | विवरण |
|---|---|
| Length | यह परिभाषित करने के लिए कि इमेज बॉर्डर बॉक्स से कितनी दूर तक बढ़ेगी। डिफ़ॉल्ट मान 0 पर सेट है यानी यह बॉर्डर बॉक्स से आगे नहीं बढ़ती। |
| Number | एक संख्या मान परिभाषित करने के लिए जो बॉर्डर-विड्थ का गुणक है। |
| Initial | इस प्रॉपर्टी को प्रारंभिक मान पर सेट करने के लिए। |
| Inherit | पैरेंट प्रॉपर्टी मान को इनहेरिट करने के लिए |
उदाहरण
आइए borderImageOutset प्रॉपर्टी का उदाहरण देखें -
<!DOCTYPE html> <html> <head> <style> #P1 { border: 20px solid transparent; margin: 20px; border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30 round; border-image-outset: 5px; background-color: lightgreen; } </style> <script> function changeBottomOutset(){ document.getElementById("P1").style.borderImageOutset="20px"; document.getElementById("Sample").innerHTML="The border image outset is now increased"; } </script> </head> <body> <h2>Demo Heading</h2> <p id="P1"> This is a sample paragraph containing some text. This paragraph is created only for the sake of this example</p> <p>Change the above div border image outset by clicking the below button</p> <button onclick="changeBottomOutset()">Change Bottom Outset</button> <p id="Sample"></p> </body> </html>
आउटपुट
यह निम्नलिखिक आउटपुट उत्पन्न करेगा -
“Change Border Outset” बटन पर क्लिक करने पर -
