জাভাস্ক্রিপ্টে ক্লাস দ্বারা স্টাইল
style অ্যাট্রিবিউটের মাধ্যমে এলিমেন্ট স্টাইল করা
কখনও কখনও সুবিধাজনক, কিন্তু বেশিরভাগ ক্ষেত্রেই - সবচেয়ে
সফল ধারণা নয়। সমস্যা হলো যে স্টাইলগুলো
জাভাস্ক্রিপ্ট ফাইলে ছড়িয়ে ছিটিয়ে থাকবে
এবং সেগুলো পরিবর্তন করা কষ্টসাধ্য হবে।
CSS ফাইলে স্টাইল নির্ধারণ করা অনেক বেশি সুবিধাজনক,
যাতে জাভাস্ক্রিপ্ট কোড খুঁড়তে না হয়েই
সেগুলো সহজেই পরিবর্তন করা যায়।
উদাহরণস্বরূপ ধরা যাক আমাদের কাছে একটি এলিমেন্ট আছে, যা একটি নির্দিষ্ট মেসেজ দেখায়। মেসেজটি "ভাল" হতে পারে এবং সবুজ রঙে দেখাতে পারে আর "খারাপ" হতে পারে এবং লাল রঙে দেখাতে পারে। এমন ক্ষেত্রে সর্বোত্তম সমাধান হবে এর জন্য সংশ্লিষ্ট CSS ক্লাস তৈরি করা:
.success {
color: green;
}
.error {
color: red;
}
এখন "ভাল" মেসেজ দেখানোর সময় আমরা এলিমেন্টটিকে "ভাল" ক্লাস দেব:
elem.textContent = 'good';
elem.classList.add('success');
আর "খারাপ" মেসেজ দেখানোর সময় আমরা এলিমেন্টটিকে "খারাপ" ক্লাস দেব:
elem.textContent = 'bad';
elem.classList.add('error');
সংখ্যা সহ কিছু প্যারাগ্রাফ দেওয়া আছে। একটি লুপ দিয়ে এই প্যারাগ্রাফগুলো পরিদর্শন করুন এবং যেগুলোতে জোড় সংখ্যা আছে, সেগুলোকে লাল রঙে রাঙান, আর যেগুলোতে বিজোড় সংখ্যা আছে - সেগুলোকে সবুজ রঙে রাঙান।
