JavaScript ကို အသုံးပြု၍ CSS Classes များဖြင့် စတိုင်ချယ်ရှင်ပြုခြင်း

ယခင်သင်ခန်းစာတွင် element ၏ style attribute ကို ပြောင်းလဲခြင်းဖြင့် CSS စတိုင်များကို ပြောင်းလဲနည်းကို သင်ယူခဲ့ပါသည်။ များသောအားဖြင့် ၎င်းသည် မကောင်းသောအိုင်ဒီယာမဟုတ်ပါ။ အကြောင်းမှာ CSS စတိုင်များကို JavaScript code ထဲသို့ ဖြန့်ကျက်ထည့်သွင်းပါက၊ နောက်ပိုင်းတွင် website ၏ design ကို ပြောင်းလဲရန် ခက်ခဲလာမည်ဖြစ်ပြီး၊ JavaScript code ထဲတွင် ထည့်သွင်းထားသော စတိုင်များကို ရှာဖွေရန် လိုအပ်မည်ဖြစ်သည်။

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

ဥပမာတစ်ခုကို ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် စာပိုဒ်အချို့ရှိသည် ဆိုပါစို့။

<p>text1</p>
<p>text2</p>
<p>text3</p>

စာပိုဒ်တစ်ခုခုကို ကလစ်နှိပ်လိုက်သည်နှင့် ၎င်းစာပိုဒ်သည် အရောင်တစ်မျိုးမျိုး၊ ဥပမာ အစိမ်းရောင်သို့ ပြောင်းလဲသွားစေရန် ပြုလုပ်ကြပါစို့။ ဤအတွက် CSS ဖိုင်ထဲတွင် စာပိုဒ်များကို အရောင်ဆိုးရန် အထူး class တစ်ခုကို ပြုလုပ်ပါမည်။

.colored {
	color: green;
}

Class ကို အသုံးပြုခြင်း၏ အကျိုးကျေးဇူးမှာ၊ လိုချင်သောအရောင်ကို ပြောင်းလဲရန်လွယ်ကူလာခြင်းဖြစ်သည်။ ၎င်းအတွက် CSS ဖိုင်ထဲတွင် ပြောင်းလဲမှုတစ်ခုကို ထည့်သွင်းရုံသာလိုပြီး၊ JavaScript code ကို မထိရပါ။ အထူးသဖြင့် JavaScript code ကို သင်ရေးပြီး၊ နောက်ပိုင်းတွင် အခြားသူတစ်ဦးက (CSS နှင့်သာ အလုပ်လုပ်တတ်သော အတတ်ပညာအနည်းငယ်ရှိသူဖြစ်နိုင်သည်) ၎င်းကို စတိုင်ချယ်ရှင်ပြုမည်ဆိုပါက အလွန်အဆင်ပြေသည်။

ထို့ကြောင့်၊ class ကို မိတ်ဆက်ပြီးနောက်၊ မည်သည့်စာပိုဒ်ကို ကလစ်နှိပ်လိုက်သည်နှင့် ၎င်းအား ကျွန်ုပ်တို့၏ class ကို ထည့်ခြင်းဖြင့် ၎င်း၏အရောင်ကို ပြောင်းလဲနိုင်သည်။

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // စာပိုဒ်ထံ class ထည့်ပေးခြင်း
	});
}

ကျွန်ုပ် class အမည်အတွက် ကျွန်ုပ်တို့လိုချင်သောအရောင်ကို တိုက်ရိုက်ညွှန်ပြသော green ဟူသောစကားလုံးထက် colored ဟူသောစကားလုံးကို ရွေးချယ်ရသည့် အကြောင်းရင်းကို ရှင်းပြပါ။

စာပိုဒ်တစ်ခုပေးထားသည်။ ခလုတ်များ 'အကြောင်းရာများကို ဖြတ်လိုက်ပါ', 'စာလုံးထူပြုလုပ်ပါ', 'အနီရောင်ပြုလုပ်ပါ' ပေးထားသည်။ ခလုတ်တစ်ခုစီကို နှိပ်လိုက်သည်နှင့် သတ်မှတ်ထားသောလုပ်ဆောင်ချက်သည် စာပိုဒ်နှင့် ဖြစ်ပေါ်စေပါ (ဥပမာ အနီရောင်ဖြစ်လာသည်)။