HTML DOM Element classList অ্যাট্রিবিউট
- পূর্ববর্তী পৃষ্ঠা children
- পরবর্তী পৃষ্ঠা className
- একত্রীকরণকৃত স্তরে ফিরে যান HTML DOM Elements অবজেক্ট
বিবরণ ও ব্যবহার
classList অ্যাট্রিবিউট ফিরিয়ে দেয়া হয় উপাদানের CSS ক্লাস নাম。
classList অ্যাট্রিবিউট ফিরিয়ে দেয়া হয় DOMTokenList。
উদাহরণ
উদাহরণ 1
"myStyle" ক্লাস উপাদানে যোগ করুন:
const list = element.classList;
list.add("myStyle");
উদাহরণ 2
উপাদান থেকে "myStyle" ক্লাস অপসারণ করুন:
const list = element.classList;
list.remove("myStyle");
উদাহরণ 3
"myStyle"-এর খোলা/বন্ধ সুইচ করুন:
const list = element.classList;
list.toggle("myStyle");
সুঝান:পাতার নিচে আরও উদাহরণ পাবেন。
সিন্থেক্স
element.classList
ফিরিয়ে দেয়া মূল্য
| ধরন | বর্ণনা |
|---|---|
| বস্তু | DOMTokenList. উপাদানের ক্লাস নাম তালিকা。 |
মন্তব্য:classList অ্যাট্রিবিউট অপণ্ণমান কিন্তু আপনি নিচে তালিকাভুক্ত পদ্ধতি ব্যবহার করে তালিকা থেকে ক্লাস যোগ করা, সুইচ করা বা অপসারণ করতে পারেন:
classList অ্যাট্রিবিউট এবং পদ্ধতি
| নাম | বর্ণনা |
|---|---|
| add() | একটি বা একাধিক টোকেন তালিকা থেকে যোগ করুন。 |
| contains() | যদি তালিকা ক্লাস ধারণ করে, তবে true ফিরিয়ে দেয়। |
| entries() | তালিকা থেকে কী/মূল্য প্যার ধারণকারী ইটারেটর ফিরিয়ে দেয়। |
| forEach() | তালিকার প্রত্যেক টোকেনের জন্য কলব্যাক ফাংশন চালু করুন। |
| item() | তালিকার নির্দিষ্ট সিদ্ধান্ত টোকেন ফিরিয়ে দিয়ে যান。 |
| keys() | তালিকার কী তালিকা ইটারেটর ফিরিয়ে দিয়ে যান。 |
| length | তালিকার টোকেন সংখ্যা ফিরিয়ে দিয়ে যান。 |
| remove() | তালিকা থেকে একটি বা বেশিরভাবে টোকেন মুক্ত করুন。 |
| replace() | তালিকার টোকেনগুলোতে প্রতিস্থাপন করুন。 |
| supports() | যদি টোকেন একটি সমর্থিত বৈশিষ্ট্য টোকেন হয়, তবে true ফিরিয়ে দিয়ে যান。 |
| toggle() | তালিকার টোকেনগুলোর মধ্যে পাল্টা করুন。 |
| value | টোকেন তালিকা শ্রেণীতে শব্দ রূপে ফিরিয়ে দিয়ে যান。 |
| values() | তালিকার মানগুলোর সাথে ইটারেটর ফিরিয়ে দিয়ে যান。 |
আরও উদাহরণ
উদাহরণ 4
এলিমেন্টে বেশিরভাবে শ্রেণী যোগ করুন:
element.classList.add("myStyle", "anotherClass", "thirdClass");
উদাহরণ 5
এলিমেন্ট থেকে বেশিরভাবে শ্রেণী মুক্ত করুন:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
উদাহরণ 6
এলিমেন্টের শ্রেণী সংখ্যা কি?
let numb = element.classList.length;
উদাহরণ 7
এলিমেন্ট "myDIV"-এর শ্রেণী নাম পাওয়া হবে:
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
উদাহরণ 8
এলিমেন্টের প্রথম শ্রেণী পাওয়া হবে:
let className = element.classList.item(0);
উদাহরণ 9
এলিমেন্ট "myStyle" শ্রেণী কি আছে?
let x = element.classList.contains("myStyle");
উদাহরণ 10
যদি এলিমেন্ট "myStyle" শ্রেণী হয়, তবে "anotherClass" মুক্ত করুন:
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
উদাহরণ 11
শ্রেণীগুলোর মধ্যে পাল্টা করে ড্রপডাউন বাটন তৈরি করুন:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
উদাহরণ 12
স্থাপন করুন চিকনা নাভিগেশনবার:
// নাভিগেশনবার পাওয়া
const navbar = document.getElementById("navbar");
// নাভিগেশনবার অবস্থান পাওয়া
const sticky = navbar.offsetTop;
// আপনি তার স্ক্রোলিং অবস্থানে পৌঁছালে, sticky শ্রেণী নাভিগেশনবার যোগ করুন
// স্ক্রোলিং অবস্থান ছেড়ে যাওয়ার সময় তা মুছে দিন
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
ব্রাউজার সমর্থন
সমস্ত ব্রাউজার সমর্থন করে element.classList：
| চ্রোম | আইই | এজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
|---|---|---|---|---|---|
| চ্রোম | আইই | এজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
| সমর্থন | 9-11 | সমর্থন | সমর্থন | সমর্থন | সমর্থন |
- পূর্ববর্তী পৃষ্ঠা children
- পরবর্তী পৃষ্ঠা className
- একত্রীকরণকৃত স্তরে ফিরে যান HTML DOM Elements অবজেক্ট
