JavaScript အတွင်း CSS Class များဖြင့် စတိုင်ချခြင်း

Attribute style မှတစ်ဆင့် element များကို စတိုင်ချခြင်းသည် တစ်ခါတစ်ရံ အဆင်ပြေသော်လည်း အများအားဖြင့် အကောင်းဆုံးနည်းလမ်း မဟုတ်ပါ။ ပြဿနာမှာ စတိုင်များသည် JavaScript ဖိုင်များအတွင်း ဖြန့်ကျက်နေပြီး ၎င်းတို့ကို ပြုပြင်ရန် ခက်ခဲသောကြောင့်ဖြစ်သည်။ CSS ဖိုင်များအတွင်းတွင် စတိုင်များကို သတ်မှတ်ခြင်းက ပိုမိုအဆင်ပြေပြီး JavaScript ကုဒ်အတွင်း မနှိုက်ရဘဲ အလွယ်တကူ ပြုပြင်နိုင်မည်ဖြစ်သည်။

ဥပမာအားဖြင့် ကျွန်ုပ်တို့တွင် သတင်းစကားတစ်ခုကို ပြသသည့် element တစ်ခု ရှိသည်ဆိုပါစို့။ သတင်းစကားသည် "ကောင်းသော" အမျိုးအစားဖြစ်ပြီး အစိမ်းရောင်ဖြင့် ပြသရမည် သို့မဟုတ် "ဆိုးသော" အမျိုးအစားဖြစ်ပြီး အနီရောင်ဖြင့် ပြသရမည်။ ထိုသို့သောအခြေအနေတွင် အကောင်းဆုံးဖြေရှင်းချက်မှာ သင့်လျော်သော CSS Class များကို ပြုလုပ်ပေးရန်ဖြစ်သည်။

.success {
	color: green;
}
.error {
	color: red;
}

ယခုအခါ "ကောင်းသော" သတင်းစကား ပြသတိုင်းတွင် element အား "ကောင်းသော" class ကို ပေးရမည်။

elem.textContent = 'good';
elem.classList.add('success');

"ဆိုးသော" သတင်းစကား ပြသတိုင်းတွင်မူ element အား "ဆိုးသော" class ကို ပေးရမည်။

elem.textContent = 'bad';
elem.classList.add('error');

နံပါတ်များပါသော စာပိုဒ်များကို ပေးထားသည်။ ထိုစာပိုဒ်များကို loop ဖြင့် လှည့်ပတ်ပြီး စုံကိန်းများပါသော စာပိုဒ်များကို အနီရောင်အဖြစ်လည်းကောင်း၊ မကိန်းများပါသော စာပိုဒ်များကို အစိမ်းရောင်အဖြစ်လည်းကောင်း ပြောင်းလဲပြပါ။