किसी तत्व की कुल चौड़ाई और ऊंचाई की गणना के तरीके को निर्दिष्ट करने के लिए HTML DOM boxSizing प्रॉपर्टी का उपयोग किया जाता है। इसमें मान के रूप में "बॉर्डर-बॉक्स" या "कंटेंट-बॉक्स" हो सकता है।
−
. के लिए वाक्य रचना निम्नलिखित हैबॉक्स साइज़िंग प्रॉपर्टी सेट करना -
object.style.boxSizing = "content-box|border-box|initial|inherit"
संपत्ति के मूल्यों को इस प्रकार समझाया गया है -
| मान | <वें शैली ="पाठ-संरेखण:केंद्र;">विवरण|
|---|---|
| सामग्री-बॉक्स | यह डिफ़ॉल्ट मान है और कोई भी पैडिंग या बॉर्डर चौड़ाई सामग्री बॉक्स की अंतिम चौड़ाई में जोड़ दी जाएगी। |
| बॉर्डर-बॉक्स | बॉर्डर-बॉक्स में निर्दिष्ट चौड़ाई बरकरार रहती है और यदि कोई पैडिंग या बॉर्डर लगाया जाता है तो सामग्री बॉक्स सिकुड़ जाता है। |
| प्रारंभिक | इस गुण को प्रारंभिक मान पर सेट करने के लिए। |
| उत्तराधिकारी | मूल संपत्ति मूल्य प्राप्त करने के लिए |
आइए बॉक्स साइजिंग प्रॉपर्टी के लिए एक उदाहरण देखें -
उदाहरण
<!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="The box sizing is now changed to content-box ";
}
</script>
</head>
<body>
<div id="DIV1">
THIS IS SAMPLE TEXT INSIDE DIV.HELLO WORLD DIV.
</div>
<p>Change the above div box-sizing property by clicking the below button</p>
<button onclick="changeBoxSizing()">Change Box Sizing</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“बॉक्स का आकार बदलें” . क्लिक करने पर बटन -
