জাভাস্ক্রিপ্টে CSS ক্লাস ব্যবহার করে স্টাইলিং

পূর্ববর্তী পাঠে আমরা শিখেছিলাম কিভাবে style অ্যাট্রিবিউট পরিবর্তন করে এলিমেন্টগুলির CSS স্টাইল পরিবর্তন করতে হয়। বেশিরভাগ ক্ষেত্রেই এটি খুব ভাল ধারণা নয়। কারণ হল, যদি CSS স্টাইলগুলি জাভাস্ক্রিপ্ট কোডে ছড়িয়ে দেওয়া হয়, তাহলে পরবর্তীতে ওয়েবসাইটের ডিজাইন পরিবর্তন করা সমস্যাযুক্ত হয়ে পড়বে, কারণ তখন জাভাস্ক্রিপ্ট কোড ঘাঁটতে হবে সেখানে লুকানো স্টাইল খুঁজে বের করার জন্য।

ভবিষ্যত রক্ষণাবেক্ষণের জন্য আরও সুবিধাজনক হবে এলিমেন্টে CSS ক্লাস যোগ করা বা সরানো, যার মাধ্যমে তাদের প্রয়োজনীয়ভাবে স্টাইল করা যায়।

আসুন একটি উদাহরণ দিয়ে দেখি। ধরি আমাদের কয়েকটি অনুচ্ছেদ আছে:

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

আসুন এমন করি যাতে যেকোনো অনুচ্ছেদে ক্লিক করলে, সেই অনুচ্ছেদটি কোনও একটি রঙ্গে রঙ্গিন হয়, উদাহরণস্বরূপ, সবুজে। এর জন্য CSS ফাইলে অনুচ্ছেদগুলি রঙ্গিন করার জন্য একটি বিশেষ ক্লাস তৈরি করি:

.colored {
	color: green;
}

ক্লাস ব্যবহার করার সুবিধা হল যে এখন কাঙ্ক্ষিত রং সহজেই পরিবর্তন করা যাবে - এর জন্য শুধু CSS ফাইলে পরিবর্তন আনতে হবে, জাভাস্ক্রিপ্ট কোড ঘাঁটতে হবে না। এটি বিশেষভাবে সুবিধাজনক হবে যখন, জাভাস্ক্রিপ্ট কোড আপনি লিখেছেন, কিন্তু পরবর্তীতে এটি স্টাইল করবে অন্য কেউ (সম্ভবত কম দক্ষ একজন ব্যক্তি, যে শুধুমাত্র CSS নিয়ে কাজ করতে জানে)।

সুতরাং, এখন, ক্লাস চালু করার পরে, যেকোনো অনুচ্ছেদে ক্লিক করে এর রং পরিবর্তন করা যাবে, শুধু এটিতে আমাদের ক্লাসটি যোগ করে:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // অনুচ্ছেদে ক্লাস যোগ করি
	});
}

ব্যাখ্যা করুন, কেন আমি ক্লাসের নামের জন্য colored শব্দটি বেছে নিয়েছি, এবং green শব্দটি নই, যা আমাদের কাঙ্ক্ষিত রংকে স্পষ্টভাবে নির্দেশ করে।

একটি অনুচ্ছেদ দেওয়া আছে। বোতাম দেওয়া আছে 'আড়াআড়ি দাগ দিন', 'গাঢ় করুন', 'লাল করুন'। যাতে প্রতিটি বোতামে চাপ দিলে নির্দিষ্ট কাজটি অনুচ্ছেদের সাথে ঘটে (লাল হয়ে যায়, উদাহরণস্বরূপ)।