JavaScript көмегімен CSS кластары арқылы стильдеу

Алдыңғы сабақта біз элементтердің CSS стильдерін style атрибутын өзгерту арқылы қалай өзгертуді үйрендік. Көбінесе бұл өте жақсы идея емес. Мәселе мынада, егер CSS стильдерін JavaScript кодына шашыратып жіберсек, болашақта сайт дизайнын өзгерту қиын болады, себебі сол жерде жасырылған стильдерді іздеу үшін JavaScript кодын қазып шығуға тура келеді.

Болашақта қолдау көрсету үшін ыңғайлырақ әдіс - элементке CSS кластарын қосу немесе алып тастау, осылайша оларды қажетті түрде стильдеу.

Мысал арқылы қарастырайық. Бізде бірнеше абзац бар делік:

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

Кез келген абзацты басқанда, сол абзац бір түске, мысалы, жасыл түске боялсын. Ол үшін CSS файлында абзацтарды бояу үшін арнайы класс жасаймыз:

.colored {
	color: green;
}

Класты қолданудың артықшылығы мынада, енді қажетті түсті өзгерту оңай болады - ол үшін JavaScript кодын қазбастан, тек CSS файлында өзгеріс енгізу жеткілікті. Бұл әсіресе сіз JavaScript кодын жазсаңыз, ал оны болашақта стильдеу үшін басқа біреу (мүмкін тек CSS-пен жұмыс істей алатын аз білімді адам) келсе, өте ыңғайлы.

Сонымен, енді класс енгізгеннен кейін, кез келген абзацты басқанда оның түсін жай ғана оған біздің класты қосу арқылы өзгертуге болады:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // абзацқа класс қосамыз
	});
}

Мен класс атауы үшін біздің қалаған түсімізге анық сілтеме жасайтын green сөзінің орнына неге colored сөзін таңдағанымды түсіндіріңіз.

Абзац берілген. 'сызып тастау', 'қалың ету', 'қызыл ету' батырмалары берілген. Әр батырманы басқанда берілген әрекет абзац болатындай етіңіз (мысалы, қызыл болады).