HTML DOM Style borderImageSlice प्रॉपर्टी

HTML DOM borderImageSlice प्रॉपर्टी का उपयोग यह परिभाषित करने के लिए किया जाता है कि बॉर्डर इमेज को क्षेत्रों में कैसे विभाजित किया जाता है। यह प्रतिशत, संख्या या वैश्विक मानों में बॉर्डर इमेज ऑफसेट निर्दिष्ट करके किया जाता है।

सिंटैक्स निम्नलिखित है:

borderImageSlice प्रॉपर्टी सेट करना:

object.style.borderImageSlice = "number|%|fill|initial|inherit"

उपरोक्त प्रॉपर्टी निम्नलिखित हैं:

आइए borderImageSlice प्रॉपर्टी के लिए एक उदाहरण देखें:

उदाहरण

<!DOCTYPE html> <html> <head> <style>    div {       width: 50%;    }    #b1 {       border: 30px solid transparent;       padding: 5px;       font-size:20px;       border-image: url("https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg");       border-image-slice: 60%;    } </style> <script>    function changeBorderSlice(){       document.getElementById("b1").style.borderImageSlice="10%";       document.getElementById("Sample").innerHTML="बॉर्डर इमेज स्लाइस अब बदल गया है";    } </script> </head> <body> <div id="b1">यह div के अंदर कुछ नमूना टेक्स्ट है</div> <p>उपरोक्त div बॉर्डर इमेज स्लाइस बदलें...</p> <button onclick="changeBorderSlice()">बॉर्डर स्लाइस बदलें</button> <p id="Sample"></p> </body> </html>

आउटपुट

बॉर्डर स्लाइस बदलें बटन पर क्लिक करने पर: