Design

Add,Remove & Toggle class with Javascript classlist

အားလုံးပဲ မဂၤလာပါဗ်ာ။ ကၽြန္ေတာ္ကေတာ့ Spiceworks Myanmar Web Production Company က ညီညီေဇာ္ျဖစ္ပါတယ္ဗ်ာ။ ဒီအပတ္မွာေတာ့ Html element ရဲ့ DOM property တစ္ခုျဖစ္တဲ့ classList ကိုသုံးၿပီး HTML element မွာ style ေတြ ေပးထားတာေတြကို JavaScript ကေန add, remove, toggle လုပ္တာကို sharing လုပ္ေပးသြားမွာ ျဖစ္ပါတယ္။

ပထမ အရင္ဆုံး index file တစ္ခု တည္ေဆာက္ပါမယ္။ ၿပီးရင္ HTML code ထည့္ပါမယ္။ ၿပီးေတာ့ CSS link ခ်ိတ္ပါမယ္။ ကၽြန္ေတာ္တို႔က JavaScript ကေန handle လုပ္ျပေပးသြားမွာ ျဖစ္လို႔ JS link ေလး ခ်ိတ္ပါမယ္ဗ်ာ။

ခု ကၽြန္ေတာ္က button ႏွိပ္လိုက္တဲ့အခါ စာသားရဲ့ design ေျပာင္းသြားတာေတြ၊ မူလရွိတဲ့ design ကို ျဖဳတ္လိုက္တာေတြ၊ ထည့္လိုက္၊ ျဖဳတ္လိုက္၊ ေျပာင္းျပန္ကစားတာေတြ လုပ္ျပမွာ ျဖစ္လို႔ text စာသား နဲ႔ button တစ္ခု တည္ေဆာက္ပါမယ္။


အဲ့ဒီစာသားကို ကၽြန္ေတာ္တို႔ CSS ကေန style နည္းနည္းေလး ထည့္ၿပီး မူလ text နဲ႔ ကြဲေအာင္ ျပင္လိုက္ပါမယ္။

ခုပုံစံကို ကၽြန္ေတာ္တို႔ run ၾကည့္လိုက္တဲ့အခါက်ရင္ ကၽြန္ေတာ္တို႔သတ္မွတ္ခဲ့တဲ့ စာသားေလးက ပုံစံတစ္မ်ိဳးနဲ႔ လွေနမွာ ျဖစ္ပါတယ္။ အဲ့လို CSS file မွာ သတ္မွတ္ထားခဲ့တဲ့ style ကို Javascript ကေန cLassList remove ကို သုံးၿပီး ျဖဳတ္မွာ ျဖစ္ပါတယ္။

JS file မွာက အဲ့ဒီ txt နဲ႔ button က ေပးထားတဲ့ id ကို const နဲ႔ သတ္မွတ္ပါမယ္။
ၿပီးရင္ အဲ့ const နဲ႔ သတ္မွတ္ထားတဲ့ btn ကို click လိုက္တဲ့အခါ action တစ္ခု ျဖစ္မွာဆိုေတာ့
ေအာက္မွာ ျပထားတဲ့ အတိုင္း ES6 arrow function တစ္ခု တည္ေဆာက္ပါမယ္။ ၿပီးရင္ text ရဲ့ id ကို ထည့္ထားတဲ့ const မွာ classList.remove() ကို ထည့္လိုက္ရင္ မူလ ကၽြန္ေတာ္တို႔႔ ပုံစံလွေအာင္ CSS မွာေပးထားတဲ့ text ရဲ့ style က ေျပာင္းသြားမွာ ျဖစ္ပါတယ္။ ခုလုပ္တဲ့ပုံစံက ရွိတဲ့ class ကို ျဖဳတ္လိုက္႐ုံသက္သက္ပဲ ျဖစ္ပါတယ္ဗ်ာ။


ေအာက္မွာ ျပထားတဲ့ classList add က html element ကေန class name မေပးထားဘဲ CSS style ကေန ေပးတဲ့ class ကို ထည့္တာ ျဖစ္ပါတယ္။

 

 

ေအာက္မွာ ျပထားတဲ့ classList toggle က true / false လိုမ်ိဳးဗ်။ သူကရိုးရွင္းပါတယ္။ ရွိရင္ ျဖဳတ္မယ္။ မရွိဘူးဆိုရင္ ထည့္မယ္ ဆိုတဲ့သေဘာမ်ိဳးပါဘဲ ခင္ဗ်ာ။

ဟုတ္ကဲ့ ခုလိုအခ်ိန္ေပးၿပီး ဖတ္ရႈေပးတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္။ ေန႔ရက္တိုင္း ေပ်ာ္ရြင္က်န္းမာပါေစ ခင္ဗ်ာ။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *