HTML DOM classList প্রপার্টি HTML এলিমেন্টের সাথে যুক্ত ক্লাসের নাম ফেরত দিতে ব্যবহৃত হয়। এটি একটি DOMTokenlist আকারে ক্লাসের নাম প্রদান করে। DOMTokenlist স্থান-বিচ্ছিন্ন টোকেনগুলির একটি সেট ছাড়া আর কিছুই নয়। এই বৈশিষ্ট্যটি একটি উপাদানের CSS ক্লাস যোগ, অপসারণ বা টগল করার জন্য দরকারী।
ক্লাসলিস্ট প্রপার্টি হল একটি শুধুমাত্র পঠনযোগ্য সম্পত্তি কিন্তু আপনি add() এবং রিমুভ() পদ্ধতি ব্যবহার করে একটি উপাদানের ক্লাস যোগ বা মুছে ফেলতে পারেন।
সম্পত্তি
নিম্নোক্ত ক্লাসলিস্ট -
এর সম্পত্তি| সম্পত্তি | বিবরণ |
|---|---|
| দৈর্ঘ্য | তালিকায় ক্লাসের সংখ্যা ফেরত দিতে। এটি শুধুমাত্র পঠনযোগ্য৷ | ৷
পদ্ধতি
ক্লাসলিস্ট -
এর পদ্ধতিগুলি নিম্নরূপ| পদ্ধতি | বিবরণ |
|---|---|
| add(class1, class2, class 3...) | একটি উপাদানে এক বা একাধিক শ্রেণীর নাম যোগ করতে। যদি প্রদত্ত ক্লাসটি ইতিমধ্যেই বিদ্যমান থাকে তবে এটি যোগ করা হবে না৷ |
| ধারণ করে(শ্রেণী) | কোন এলিমেন্টের প্রদত্ত শ্রেণীর নাম আছে কিনা তা দেখানোর জন্য একটি বুলিয়ান মান ফেরত দিতে। True এর মানে হল এলিমেন্টে নির্দিষ্ট ক্লাসের নাম আছে যখন মিথ্যা মানে হল ক্লাসের নামটি এলিমেন্টে নেই। |
| আইটেম(সূচী) | একটি উপাদান থেকে প্রদত্ত সূচক নম্বর সহ ক্লাসের নাম ফেরত দিতে। সূচীকরণ 0 থেকে শুরু হয় এবং সূচী সীমার বাইরে থাকলে শূন্য হয়ে যাবে। |
| সরান(class1, class2 class 3, ...) | একটি উপাদান থেকে এক বা একাধিক শ্রেণীর নাম সরাতে। যদি অপসারণে নির্দিষ্ট করা ক্লাসটি বিদ্যমান না থাকে তবে এটি একটি ত্রুটি নিক্ষেপ করবে না৷ | ৷
| টগল(শ্রেণী, সত্য| মিথ্যা) | একটি উপাদানের জন্য একটি শ্রেণীর নামের মধ্যে টগল করতে। প্রথম প্যারামিটারটি উপাদানটিতে একটি ক্লাস যোগ করে যেটির অস্তিত্ব নেই এবং সত্য প্রদান করে যখন ক্লাসটি বিদ্যমান থাকে তবে এটি উপাদান থেকে সরানো হয় এবং মিথ্যা প্রদান করে। দ্বিতীয় প্যারামিটারটি একটি ঐচ্ছিক একটি যা একটি বুলিয়ান মান নেয় এবং প্রদত্ত শ্রেণীটিকে জোর করে। যোগ করা বা অপসারণ করা এটি আগে বিদ্যমান ছিল কিনা তা বিবেচনা করে না। |
সিনট্যাক্স
ক্লাসলিস্ট প্রপার্টি -
-এর জন্য সিনট্যাক্স নিচে দেওয়া হল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” আইডি রয়েছে যা আমাদের ক্ষেত্রে
function classAdd() {
document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
} 