classList ဂုဏ်သတ္တိ

classList ဂုဏ်သတ္တိသည် အခြေခံဒြပ်စင်၏ CSS class များ pseudo-array ကို ပါဝင်ပြီး၊ အခြေခံဒြပ်စင်၏ class များကို ပေါင်းထည့်ခြင်း၊ ဖယ်ရှားခြင်း၊ အခြေခံဒြပ်စင်၏ class များအတွင်း သီးခြား class တစ်ခု ရှိ/မရှိ စစ်ဆေးခြင်းတို့ကို ခွင့်ပြုပေးသည်။

ဒီဟာက class attribute အကြောင်းဖြစ်ပြီး၊ ၎င်းအတွင်းတွင် class အများအပြားကို အာကာသဖြင့် ခွဲကာ ရေးသားနိုင်ပါသည်၊ ဥပမာ www ggg zzz။ classList ကို အသုံးပြု၍ ကျန်ရှိသော class များကို ထိခိုက်ခြင်းမရှိဘဲ၊ ဥပမာ ggg class ကို ဖယ်ရှားနိုင်ပါသည်။

ဝါကျဖွဲ့ပုံ

ဒြပ်စင်.classList;

ဥပမာ . class များ၏ အရေအတွက်

အခြေခံဒြပ်စင်၏ class အရေအတွက်ကို ရှာဖွေကြည့်ရအောင်:

<p id="elem" class="www ggg zzz"></p>

let elem = document.querySelector('#elem');

let length = elem.classList.length;
console.log(length);

ကုဒ်ကို လုပ်ဆောင်ခြင်း၏ ရလဒ်:

3

ဥပမာ . class များကို လှည့်ပတ်ခြင်း

အခြေခံဒြပ်စင်၏ class များကို တစ်ခုပြီးတစ်ခု ထုတ်ပြကြည့်ရအောင်:

<p id="elem" class="www ggg zzz"></p>

let elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
	console.log(className);
}

ကုဒ်ကို လုပ်ဆောင်ခြင်း၏ ရလဒ်:

'www'
'ggg'
'zzz'

ဒါတွေလဲ ကြည့်ပါ

classList.add method,
သတ်မှတ်ထားသော class ကို ပေါင်းထည့်ပေးသည်
classList.remove method,
သတ်မှတ်ထားသော class ကို ဖယ်ရှားပေးသည်
classList.contains method,
သတ်မှတ်ထားသော class ကို စစ်ဆေးပေးသည်
classList.toggle method,
သတ်မှတ်ထားသော class ကို ပြောင်းလဲပေးသည်