HTML DOM columns প্রপার্টি columnWidth এবং columnCount প্রপার্টি ম্যানিপুলেট করার জন্য ব্যবহৃত হয়।
সিনট্যাক্স
columns প্রপার্টি সেট করার সিনট্যাক্স:
object.style.columns = "auto|column-width column-count|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| auto | column-width এবং column-count কে auto-এ সেট করে এবং এটি ডিফল্ট মান। |
| columnWidth | কলাম প্রস্থ নির্দিষ্ট করতে ব্যবহৃত হয়। |
| columnCount | কলাম সংখ্যা নির্দিষ্ট করতে ব্যবহৃত হয়। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #DIV1{ columns: 5rem auto; } img { border: 1px solid brown; } </style> <script> function changeColumns(){ document.getElementById("DIV1").style.columns="10px 3"; document.getElementById("Sample").innerHTML="কলামগুলো এখন মডিফাইড হয়েছে"; } </script> </head> <body> <div id="DIV1"> <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"><br/> </div> <p>নিচের বাটনে ক্লিক করলে উপরের div-এর columns প্রপার্টি পরিবর্তন হবে</p> <button onclick="changeColumns()">কলামগুলো পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
কলামগুলো পরিবর্তন করুন বাটনে ক্লিক করলে:
