HTML DOM borderWidth প্রপার্টি একটি এলিমেন্টের বর্ডার প্রস্থ প্রপার্টিগুলো পাওয়া বা সেট করার জন্য শর্টহ্যান্ড হিসেবে ব্যবহৃত হয়। এটি ১ থেকে ৪ মান নিতে পারে নিম্নলিখিত উপায়ে:
- যদি ৪টি মান দেওয়া হয় তবে এটি ঘড়ির সুই অনুযায়ী বর্ডার-প্রস্থ অ্যাসাইন করে।
- যদি শুধু একটা মান দেওয়া হয় তবে একই প্রস্থ চারো বর্ডারে প্রয়োগ হয়।
- যদি দুটি মান দেওয়া হয় তবে উপরের এবং নিচের প্রথম মান এবং বাম ও ডানের দ্বিতীয় মান সেট হয়।
সিনট্যাক্স
borderWidth প্রপার্টি সেট করার সিনট্যাক্স:
object.style.borderWidth = "thin|medium|thick|length|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| thin | পাতলা বর্ডার নির্দেশ করে। |
| medium | মাঝারি বর্ডার নির্দেশ করে এবং এটি ডিফল্ট মান। |
| thick | মোটা বর্ডার নির্দেশ করে। |
| length | লেন্থ ইউনিটে বর্ডার প্রস্থ নির্দেশ করতে ব্যবহৃত হয়। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #DIV1{ height: 100px; width: 200px; border: 10px groove orange; padding: 10px; border-width:30px; } </style> <script> function changeBorderWidth(){ document.getElementById("DIV1").style.borderWidth="5px"; document.getElementById("Sample").innerHTML="বর্ডার প্রস্থ এখন কমে গেছে"; } </script> </head> <body> <div id="DIV1">SOME SAMPLE TEXT</div> <p>নিচের বাটনে ক্লিক করলে উপরের div-এর বর্ডার প্রস্থ পরিবর্তন হবে</p> <button onclick="changeBorderWidth()">বর্ডার প্রস্থ পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
বর্ডার প্রস্থ পরিবর্তন করুন বাটনে ক্লিক করলে:
