HTML DOM columnRule প্রপার্টি columnRule প্রপার্টি পাওয়া বা সেট করার জন্য ব্যবহৃত হয়। এটি তিনটি প্রপার্টি columnRuleColor, columnRuleStyle এবং columnRuleWidth ম্যানিপুলেট করার জন্য শর্টহ্যান্ড প্রপার্টি।
সিনট্যাক্স
columnRule প্রপার্টি সেট করার সিনট্যাক্স:
object.style.columnRule = "column-rule-width column-rule-style column-rule-color|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| columnRuleWidth | কলামের মধ্যবর্তী রুল প্রস্থ সেট করার জন্য। ডিফল্টভাবে medium সেট থাকে। |
| columnRuleStyle | কলামের মধ্যবর্তী রুল শৈলী সেট করার জন্য। ডিফল্টভাবে none সেট থাকে। |
| columnRuleColor | কলামের মধ্যবর্তী রুল রঙ সেট করার জন্য। ডিফল্টভাবে এলিমেন্টের রঙ মান সেট থাকে। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #DIV1 { column-count: 4; column-rule: 4px dashed darkolivegreen; } </style> <script> function changeColumnRule(){ document.getElementById("DIV1").style.columnRule="10px solid red"; 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"> </div> <p>নিচের বাটনে ক্লিক করলে উপরের div-এর কলাম রুল প্রপার্টি পরিবর্তন হবে</p> <button onclick="changeColumnRule()">কলাম রুল পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
কলাম রুল পরিবর্তন করুন বাটনে ক্লিক করলে:
