HTML DOM classList প্রোপার্টি একটি HTML এলিমেন্টের সাথে যুক্ত ক্লাস নামগুলো রিটার্ন করতে ব্যবহৃত হয়। এটি ক্লাস নামগুলো DOMTokenlist আকারে রিটার্ন করে। DOMTokenlist কিছুই নয় বরং স্পেস-সেপারেটেড টোকেনের একটি সেট। এই প্রোপার্টি একটি এলিমেন্টের CSS ক্লাস যোগ, সরানো বা টগল করার জন্য উপযোগী।
classList প্রোপার্টি একটি রিড-অনলি প্রোপার্টি কিন্তু আপনি add() এবং remove() মেথড ব্যবহার করে একটি এলিমেন্টের ক্লাস যোগ বা সরাতে পারেন।
প্রোপার্টি
classList-এর প্রোপার্টি নিচে দেওয়া হলো:
| প্রোপার্টি | বিবরণ |
|---|---|
| Length | লিস্টে ক্লাসের সংখ্যা রিটার্ন করতে। এটি রিড-অনলি। |
মেথড
classList-এর মেথডগুলো নিচে দেওয়া হলো:
| মেথড | বিবরণ |
|---|---|
| add(class1, class2, class 3...) | এক বা একাধিক ক্লাস নাম একটি এলিমেন্টে যোগ করতে। যদি দেওয়া ক্লাস ইতিমধ্যে থাকলে, এটি যোগ হবে না। |
| contains(class) | একটি এলিমেন্টে দেওয়া ক্লাস নাম আছে কিনা তা দেখানোর জন্য একটি বুলিয়ান মান রিটার্ন করতে। True মানে এলিমেন্টে নির্দিষ্ট ক্লাস নাম আছে, false মানে ক্লাস নামটি এলিমেন্টে নেই। |
| item(index) | একটি এলিমেন্ট থেকে দেওয়া ইনডেক্স নম্বরের ক্লাস নাম রিটার্ন করতে। ইনডেক্সিং 0-তে শুরু হয় এবং ইনডেক্স আউট অফ রেঞ্জ হলে null রিটার্ন করবে। |
| remove(class1, class2 class 3, ...) | এক বা একাধিক ক্লাস নাম একটি এলিমেন্ট থেকে সরাতে। যদি remove-এ নির্দিষ্ট ক্লাস থাকতে না থাকে তবে এরর থ্রো করবে না। |
| toggle(class, true|false) | একটি এলিমেন্টের জন্য একটি ক্লাস নাম টগল করতে। প্রথম প্যারামিটার ক্লাসটি এলিমেন্টে না থাকলে যোগ করে এবং true রিটার্ন করে, থাকলে সরিয়ে false রিটার্ন করে। দ্বিতীয় প্যারামিটার একটি অপশনাল বুলিয়ান মান যা দেওয়া ক্লাসকে জোর করে যোগ বা সরানোর জন্য বাধ্য করে। এটি इसकी কোথাও থাকা বা না থাকার ব্যাপার না দেখে। |
সিনট্যাক্স
classList প্রোপার্টির সিনট্যাক্স নিচে দেওয়া হলো:
element.classList
উদাহরণ
HTML DOM classList প্রোপার্টির একটি উদাহরণ দেখি:
<!DOCTYPE html> <html> <head> <style> .firstDiv { width: 200px; height: 200px; padding: 15px; border: 1px double blue; position:relative; top:10px; } .secondDiv { background-color: lightgreen; color: red; } .thirdDiv { text-transform: capitalize; text-align: center; font-size: 30px; } </style> </head> <body> <p>Click the below button to add class to the below div element</p> <button onclick="classAdd()">ADD CLASS</button> <br> <div id="DIV1"> sample div </div> <script> function classAdd() { document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv"); } </script> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেবে:
ADD CLASS বাটনে ক্লিক করলে:
উপরের উদাহরণে:
আমরা একটি div এলিমেন্ট এবং তিনটি CSS স্টাইল ক্লাস তৈরি করেছি যাদের পরে div-এ যোগ করব:
.firstDiv { width: 200px; height: 200px; padding: 15px; border: 1px double blue; position:relative; top:10px; } .secondDiv { background-color: lightgreen; color: red; } .thirdDiv { text-transform: capitalize; text-align: center; font-size: 30px; } <div id="DIV1"> sample div </div>
আমরা তারপর ADD CLASS নামে একটি বাটন তৈরি করেছি যা ক্লিক করলে classAdd() মেথড এক্সিকিউট করবে:
<button onclick="classAdd()">ADD CLASS</button>
classAdd() মেথড "DIV1" id সহ এলিমেন্টটি পায় যা আমাদের কেসে <div> এলিমেন্ট। তারপর classlist প্রোপার্টি এবং এর add() মেথড ব্যবহার করে firstDiv, secondDiv এবং thirdDiv ক্লাসগুলো <div> এলিমেন্টে যোগ করে:
function classAdd() { document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv"); }
