HTML DOM className প্রপার্টি একটি HTML এলিমেন্টে CSS ক্লাস অ্যাসাইন করতে ব্যবহৃত হয়। className প্রপার্টি একটি এলিমেন্টের ক্লাস নাম অ্যাট্রিবিউট ভ্যালু সেট বা রিটার্ন করতে ব্যবহৃত হয়। কোনো ক্লাস যদি একটি HTML এলিমেন্টের সাথে জড়িত না থাকে, তবে একটি খালি স্ট্রিং রিটার্ন করা হয়। এই প্রপার্টি ব্যবহার করে একটি এলিমেন্টে থাকা ক্লাস নাম পরিবর্তন করা যায় -
সিনট্যাক্স
নিচে দেওয়া হলো -
className প্রপার্টি সেট করার সিনট্যাক্স -
HTMLElementObject.className = class;
এখানে, class ভ্যালু একটি এলিমেন্টের ক্লাস নাম নির্দিষ্ট করতে ব্যবহৃত হয়। একটি এলিমেন্টের সাথে একাধিক ক্লাস জড়িত থাকতে পারে স্পেস দিয়ে আলাদা করে।
উদাহরণ
HTML DOM className প্রপার্টির একটি উদাহরণ দেখি -
<!DOCTYPE html> <html> <head> <style> .firstDiv { width: 300px; height: 100px; background-color:lightgreen; } .secondDiv{ color: red; border:solid 1px blue; margin-bottom:9px; } </style> </head> <body> <p>নিচের বাটনে ক্লিক করুন div-এর ক্লাস অ্যাট্রিবিউট ভ্যালু দেখতে</p> <div id="myDIV" class="firstDiv secondDiv"> This is a sample div element. </div> <button onclick="getClassName()">GET CLASS</button> <p id="Sample"></p> <script> function getClassName() { var x = document.getElementById("myDIV").className; document.getElementById("Sample").innerHTML = "The classNames with the div element are "+x; } </script> </body> </html>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে -
GET CLASS বাটনে ক্লিক করলে -
উপরের উদাহরণে -
আমরা "myDIV" আইডি সহ একটি div তৈরি করেছি যার ভিতরে কিছু টেক্সট রয়েছে -
<div id="myDIV" class="firstDiv secondDiv"> This is a sample div element. </div>
তারপর আমরা একটি GET CLASS বাটন তৈরি করেছি যা ক্লিক করলে getClassName() মেথড এক্সিকিউট করবে -
<button onclick="getClassName()">GET CLASS</button>
getClassName() মেথড getElementById() মেথড ব্যবহার করে <div> এলিমেন্টটি পেয়ে এর সকল ক্লাস নাম className প্রপার্টি ব্যবহার করে পেয়ে ভেরিয়েবল x-এ অ্যাসাইন করে। ক্লাস নামগুলো তারপর "Sample" আইডি 가진 প্যারাগ্রাফে দেখানো হয়েছে -
function getClassName() { var x = document.getElementById("myDIV").className; document.getElementById("Sample").innerHTML = "The classNames with the div element are "+x; }
