Changing Styles

JavaScript ကနေတဆင့် HTML Element တွေရဲ့ CSS ဒီဇိုင်းတွေကို လှမ်းပြင်ချင်တယ် ဆိုရင် style ဆိုတဲ့ Property ကို အသုံးပြုရပါတယ်။ ဒီနေရာမှာ အထူးသတိထားရမယ့် အချက်တစ်ခုကတော့ CSS မှာ အသုံးပြုလေ့ရှိတဲ့ - (dash) ပါတဲ့ နာမည်တွေကို JavaScript မှာ CamelCase (ဒုတိယ စာလုံးကို အကြီးနဲ့ စရေးခြင်း) ပုံစံ ပြောင်းလဲ ရေးသားရပါတယ်။

• background-color -> backgroundColor (JavaScript တွင်)
• font-size -> fontSize
• margin-top -> marginTop

ဥပမာ (Example)

let box = document.querySelector(".box");

// အရောင် ပြောင်းလဲမည်
box.style.backgroundColor = "red";

// စာလုံး အရွယ်အစား ကြီးမည်
box.style.fontSize = "20px";

// ဘောင် (Border) ကို ဖျောက်မည်
box.style.border = "none";

Class များကို အသုံးပြုခြင်းက ပိုကောင်းသည်

လက်တွေ့ လုပ်ငန်းခွင်မှာ Style တွေ အများကြီးကို JavaScript ထဲကနေ တစ်ကြောင်းချင်းစီ လိုက်ရေးနေမယ့် အစား၊ CSS ဖိုင်ထဲမှာ Class တစ်ခုအနေနဲ့ ကြိုတင် တည်ဆောက်ထားတာ ပိုကောင်းပါတယ်။ အဲ့ဒီနောက်မှ JavaScript ကနေ အဲ့ဒီ Class ကို ထည့်ပေးတာ / ပြန်ထုတ်တာ (Add / Remove) လုပ်ခြင်းက Code ကို ပိုမို သပ်ရပ်စေပါတယ်။ (ဒီအကြောင်းကို နောက်ပိုင်း classList သင်ခန်းစာမှာ အသေးစိတ် ထပ်မံ လေ့လာရပါမယ်)