JavaScript менен CSS класстарын колдонуп стилдөө

Акыркы сабакта биз CSS стилдерин style атрибутун өзгөртүү аркылуу өзгөртө алдык. Көпчүлүк учурда бул абдан жакшы идея эмес. Бул себептен, эгерде CSS стилдерин JavaScript кодуна таратып салсаңыз, кийинчерээк сайттын дизайнын өзгөртүү оор болот, анткени ага орнотулган стилдерди издеп, JavaScript кодун казоого туура келет.

Кийинки колдоо үчүн ыңгайлуу болот элементке CSS класстарын кошуу же алып салуу, ошол аркылуу аларды каалагандай стилдөө.

Келгиле, мисал аркылуу карап көрөлү. Бизде бир нече абзац болсун:

<p>текст1</p>
<p>текст2</p>
<p>текст3</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'); // абзацка классты кошуу
	});
}

Эмне үчүн мен класстын атын үчүн colored сөзүн тандадым, ал эми green сөзүн эмес, биз каалаган түштү ачык көрсөтүп турган сөз.

Абзац берилди. 'сызып таштоо', 'жоон кылуу', 'кызыл кылуу' баскычтары берилди. Ар бир баскычты басканда берилген амал абзац менен болсун (мисалы, кызыл болуп калат).