HTML DOM Style columnCount প্রপার্টি একটি এলিমেন্ট কতগুলো কলামে ভাগ হবে তা সেট করতে ব্যবহৃত হয়।
সিনট্যাক্স
columnCount প্রপার্টি সেট করার সিনট্যাক্স:
object.style.columnCount = "number|auto|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| number | এলিমেন্টের কন্টেন্ট কতগুলো কলামে ভাগ হবে তা সেট করার জন্য। |
| auto | কলামের সংখ্যা অন্য প্রপার্টি যেমন "column-width" দ্বারা নির্ধারিত হবে। এটি ডিফল্ট প্রপার্টি মান। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> div { height: 120px; column-count: 2; border: 2px solid black; background-color: mediumvioletred; } div > div { background-color: yellow; } </style> <script> function changeColumnCount(){ document.getElementsByTagName("div")[0].style.columnCount="4"; document.getElementById("Sample").innerHTML="কলাম কাউন্ট এখন ৪ হয়ে গেছে"; } </script> </head> <body> <div id="DIV1"> <div></div> </div> <p>নিচের বাটনে ক্লিক করলে উপরের div-এর কলাম কাউন্ট প্রপার্টি পরিবর্তন হবে</p> <button onclick="changeColumnCount()">কলাম কাউন্ট পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
কলাম কাউন্ট পরিবর্তন করুন বাটনে ক্লিক করলে:
