HTML DOM boxSizing প্রপার্টি একটি এলিমেন্টের মোট প্রস্থ এবং উচ্চতা কীভাবে হিসাব করা হবে তা নির্দিষ্ট করতে ব্যবহৃত হয়। এর মান হতে পারে "border-box" বা "content-box"।
সিনট্যাক্স
boxSizing প্রপার্টি সেট করার সিনট্যাক্স:
object.style.boxSizing = "content-box|border-box|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| content-box | এটি ডিফল্ট মান এবং কোনো প্যাডিং বা বর্ডার প্রস্থ কন্টেন্ট বক্সের চূড়ান্ত প্রস্থে যোগ হবে। |
| border-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="বক্স সাইজিং এখন content-box-এ পরিবর্তিত হয়েছে"; } </script> </head> <body> <div id="DIV1"> THIS IS SAMPLE TEXT INSIDE DIV.HELLO WORLD DIV. </div> <p>নিচের বাটনে ক্লিক করলে উপরের div-এর box-sizing প্রপার্টি পরিবর্তন হবে</p> <button onclick="changeBoxSizing()">বক্স সাইজিং পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
বক্স সাইজিং পরিবর্তন করুন বাটনে ক্লিক করলে:
