HTML DOM BorderImageOutset गुण का उपयोग उस मान को सेट करने या वापस करने के लिए किया जाता है जिसके द्वारा पृष्ठभूमि छवि क्षेत्र तत्व बॉर्डर बॉक्स का विस्तार करता है। ऊपर, बाएँ, दाएँ और नीचे के मानों का उपयोग करके हम निर्दिष्ट कर सकते हैं कि पृष्ठभूमि छवि तत्व की संबंधित सीमा से कितनी विस्तारित होगी।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैBorderImageOutset गुण सेट करना -
object.style.borderImageOutset = "length|number|initial|inherit"
संपत्ति के मूल्यों को इस प्रकार समझाया गया है -
| मान | <वें शैली ="चौड़ाई:86.4625%; पाठ-संरेखण:केंद्र;">विवरण|
|---|---|
| लंबाई | यह परिभाषित करने के लिए कि छवि बॉर्डर बॉक्स से कितनी दूर तक विस्तारित होगी। डिफ़ॉल्ट मान 0 पर सेट है यानी यह बॉर्डर बॉक्स से आगे नहीं बढ़ता है। |
| संख्या | एक संख्या मान को परिभाषित करने के लिए जो कि सीमा-चौड़ाई का गुणक है। |
| आरंभिक | इस गुण को प्रारंभिक मान पर सेट करने के लिए। |
| इनहेरिट करें | मूल संपत्ति मूल्य प्राप्त करने के लिए |
उदाहरण
आइए बॉर्डरइमेजऑटसेट प्रॉपर्टी के उदाहरण को देखें -
<!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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
"बॉर्डर आउटसेट बदलें" बटन पर क्लिक करने पर -
