HTML DOM columnRuleWidth প্রপার্টি কলাম রুল প্রস্থ সেট বা পাওয়ার জন্য ব্যবহৃত হয়।
সিনট্যাক্স
columnRuleWidth প্রপার্টি সেট করার সিনট্যাক্স:
object.style.columnRuleWidth = "medium|thin|thick|length|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| thin | পাতলা রুল নির্দেশ করে। |
| medium | মাঝারি রুল নির্দেশ করে এবং এটি ডিফল্ট মান। |
| thick | মোটা রুল নির্দেশ করে। |
| length | লেন্থ ইউনিটে রুল প্রস্থ নির্দিষ্ট করতে ব্যবহৃত হয়। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #DIV1{ padding: 5px; column-count: 5; column-rule-width: 9px; column-rule-color: lightblue; column-rule-style: solid; } </style> <script> function changeColumnRuleWidth(){ document.getElementById("DIV1").style.columnRuleWidth="3px"; document.getElementById("Sample").innerHTML="কলাম রুল প্রস্থ এখন কমে গেছে"; } </script> </head> <body> <div id="DIV1"> <img src="https://www.tutorialspoint.com/images/Swift.png"><br/> <img src="https://www.tutorialspoint.com/images/xamarian.png"><br/> <img src="https://www.tutorialspoint.com/images/pl-sql.png"><br/> <img src="https://www.tutorialspoint.com/images/asp-net.png"><br/> <img src="https://www.tutorialspoint.com/images/powerbi.png"><br/> <img src="https://www.tutorialspoint.com/images/Tableau.png"><br/> <img src="https://www.tutorialspoint.com/images/Big-Data-Analytics.png"><br/> <img src="https://www.tutorialspoint.com/images/microsoftproject.png"> <img src="https://www.tutorialspoint.com/images/QlikView.png"><br/> <img src="https://www.tutorialspoint.com/images/hadoop.png"> </div> <p>নিচের বাটনে ক্লিক করলে উপরের div-এর কলাম রুল প্রস্থ পরিবর্তন হবে</p> <button onclick="changeColumnRuleWidth()">কলাম রুল প্রস্থ পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
কলাম রুল প্রস্থ পরিবর্তন করুন বাটনে ক্লিক করলে:
