HTML DOM boxSizing प्रॉपर्टी का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि किसी तत्व की कुल चौड़ाई और ऊंचाई की गणना कैसे की जाती है। इसके मान "border-box" या "content-box" हो सकते हैं।
सिंटैक्स निम्नलिखित है:
boxSizing प्रॉपर्टी सेट करना:
object.style.boxSizing = "content-box|border-box|initial|inherit"
प्रॉपर्टी मान निम्नलिखित हैं:
| मान | विवरण |
|---|---|
| content-box | यह डिफ़ॉल्ट मान है और कोई भी पैडिंग या बॉर्डर चौड़ाई कंटेंट बॉक्स की अंतिम चौड़ाई में जोड़ दी जाएगी। |
| border-box | बॉर्डर-बॉक्स में निर्दिष्ट चौड़ाई बरकरार रहती है और यदि उस पर कोई पैडिंग या बॉर्डर लागू किया जाता है तो कंटेंट बॉक्स सिकुड़ जाता है। |
| initial | इस प्रॉपर्टी को प्रारंभिक मान पर सेट करने के लिए। |
| inherit | मूल तत्व के प्रॉपर्टी मान को विरासत में लेने के लिए। |
आइए boxSizing प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <head> <style> #DIV1{ height:100px; width: 350px; border: 30px solid lightpink; box-sizing: border-box; } </style> <script> function changeBoxSizing(){ document.getElementById("DIV1").style.boxSizing="content-box"; document.getElementById("Sample").innerHTML="बॉक्स साइजिंग अब कंटेंट-बॉक्स में बदल गई है"; } </script> </head> <body> <div id="DIV1"> THIS IS SAMPLE TEXT INSIDE DIV.HELLO WORLD DIV. </div> <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त div बॉक्स-साइजिंग प्रॉपर्टी बदलें</p> <button onclick="changeBoxSizing()">बॉक्स साइजिंग बदलें</button> <p id="Sample"></p> </body> </html>आउटपुट
बॉक्स साइजिंग बदलें बटन पर क्लिक करने पर:
