JavaScriptда CSS класслари ёрдамида стилларни ўзгартириш

Олдинги дарсда биз CSS стилларини style атрибутини ўзгартириш орқали қандай ўзгартиришни ўрганган эдик. Кўпчилик ҳолларда бу жуда яхши идея эмас. Гапи шундаки, агар CSS стилларини JavaScript кодига тарқатиб юборсак, кейинчалик веб-сайт дизайнини ўзгартириш қийин бўлади, чунки JavaScript кодини ўзгартиришга тўғри келади.

Кейинги қўллаб-қувватлаш учан қулайроқ usul элементга CSS синфларини қўшиш ёки ўчириш, шунга кўра уларни керакли тарзда стиллар билан безашдир.

Келинг, мисолда кўрамиз. Фарз қилайлик, бизда бир нечта абзац бор:

<p>матн1</p>
<p>матн2</p>
<p>матн3</p>

Келинг, ҳар қандай абзац босилганда, у шу абзац бирон-бир рангга, масалан, яшил рангга боялинсин. Буни амалга ошириш учун CSS файлида абзацларни бояш учун алохида синф яратамиз:

.colored {
	color: green;
}

Синфдан фойдаланишнинг афзаллиги шундаки, енди керакли рангни ўзгартириш осон бўлади - буни амалга ошириш учун фақат CSS файлига ўзгартириш киритиш керак бўлади, JavaScript кодини ўзгартириш шарт эмас. Бу айникса қулай бўлади, агар JavaScript кодини сиз ёзсангиз, ва кейинчалик уни стиллар билан безашни бошқа биров бажарса (эҳтимол кам малакали инсон, фақат CSS билан ишлашни биладиган).

Демак, энди, синфни киритишдан сўнг, ҳар қандай абзац босилганда унинг рангни ўзгартириш мумкин, фақат уңа бизнинг синфнимизни қўшиб қўйиш орқали:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // абзацга синфни қўшамиз
	});
}

Нега мен синф номи учун colored сўзини танладим, green сўзини эмас, яъни биз хоҳлаган рангга аниқ ишора қиладиган сўзни.

Абзац берилган. Тугмалар берилган 'чизиб ташлаш', 'қалин қилиш', 'қизил қилиш'. Фарз қилайлик, ҳар бир тугма босилганда берилган амал абзац билан бажарилсин (масалан, қизил рангга киритилсин).