JavaScript yordamida CSS klasslari bilan stil berish

Oldingi darsda biz elementlarning CSS stillarini style atributini o'zgartirish orqali qanday o'zgartirishni o'rgandik. Ko'pincha bu unchali yaxshi fikr emas. Buning sababi, agar CSS stillarini JavaScript kodiga tarqatib yuborsak, kelajakda veb-sayt dizaynini o'zgartirish qiyin bo'ladi, chunki u yerda qotib qolgan stillarni qidirish uchun JavaScript kodini qaziq chiqarishga to'g'ri keladi.

Kelajakda qo'llab-quvvatlash uchun qulayroq usul elementga CSS klasslarini qo'shish yoki olib tashlash, shu orqali ularni kerakli ko'rinishda stil qilishdir.

Keling, buni misol orqali ko'rib chiqaylik. Faraz qilaylik, bizda bir nechta abzaslar bor:

<p>matn1</p>
<p>matn2</p>
<p>matn3</p>

Keling, har qanday abzas bosilganda, o'sha abzas ma'lum bir rangga, masalan, yashil rangga bo'yalishi uchun qilaylik. Buning uchun CSS faylida abzamlarni bo'yash uchun maxsus klass yaratamiz:

.colored {
	color: green;
}

Klassdan foydalanishning afzalligi shundaki, endi istalgan rangni o'zgartirish oson bo'ladi - buning uchun shunchaki CSS faylida o'zgartirish kiritish kerak bo'ladi, JavaScript kodini qaziq chiqarmasdan. Bu ayniqsa qulay bo'ladi, agar JavaScript kodini siz yozayotgan bo'lsangiz va keyinroq uni stil qilishni boshqalar (ehtimol faqat CSS bilan ishlay oladigan, kamroq malakali odam) qiladigan bo'lsa.

Shunday qilib, endi, klassni joriy qilganimizdan so'ng, har qanday abzasni bosishda uning rangini o'zgartirish mumkin, shunchaki unga bizning klassimizni qo'shib:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // abzasga klass qo'shamiz
	});
}

Tushuntiring, nega men klass nomi uchun colored so'zini tanladim, green so'zini emas, ya'ni biz xohlagan rangni aniq ko'rsatadigan so'zni.

Abzas berilgan. Tugmalar berilgan 'chizib tashlash', 'qalin qilish', 'qizil qilish'. Har bir tugma bosilganda berilgan harakat abzada amalga oshirilsin (masalan, qizil rangga aylansin).