HTML DOM Style columnRuleStyle প্রপার্টি কলাম রুলের শৈলী ডিফাইন বা ফেরত দেওয়ার জন্য ব্যবহৃত হয়।
সিনট্যাক্স
columnRuleStyle প্রপার্টি সেট করার সিনট্যাক্স:
object.style.columnRuleStyle = "none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset| initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| none | এটি ডিফল্ট মান যা কোনো রুল না থাকা নির্দেশ করে। |
| hidden | "none"-এর মতোই কিন্তু রুল স্পেস নেবে। এটি মূলত স্বচ্ছ কিন্তু উপস্থিত থাকে। |
| dotted | ডটেড রুল সংজ্ঞায়িত করে। |
| dashed | ড্যাশড রুল সংজ্ঞায়িত করে। |
| solid | স olid রুল সংজ্ঞায়িত করে। |
| double | ডাবল রুল সংজ্ঞায়িত করে। |
| groove | 3D groove রুল সংজ্ঞায়িত করে এবং ridge-এর বিপরীত। |
| ridge | 3D ridged রুল সংজ্ঞায়িত করে এবং groove-এর বিপরীত। |
| inset | 3D রুল বর্ডার সংজ্ঞায়িত করে এবং আউটসেটের বিপরীত প্রভাব তৈরি করে। |
উদাহরণ
<!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 changeColumnRuleStyle(){ document.getElementById("DIV1").style.columnRuleStyle="dashed"; 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="changeColumnRuleStyle()">কলাম রুল শৈলী পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
কলাম রুল শৈলী পরিবর্তন করুন বাটনে ক্লিক করলে:
