CSS синфҳо истифода бурда дар JavaScript тарошидан

Дар дарси гузашта мо омӯхтем, ки чӣ гуна услуби CSS унсурҳоро тағир диҳем бо тағир додани атрибути style. Аксар вақт ин тарзи хуб нест. Масала ин аст, ки агар шумо услуби CSS -ро дар коди JavaScript пароканда кунед, дар оянда тағирот додан ба тарҳи сомона мушкил хоҳад буд, зеро шумо бояд барои ёфтани услубҳое, ки ба он ҷо гузошта шудаанд, коди JavaScript -ро ҷустуҷӯ кунед.

Барои дастгирии оянда беҳтар хоҳад буд, ки ба унсурҳо CSS синфҳо илова карда ё тоза кардан, ба ин тартиб онҳоро бо услуби дилхоҳ тарошидан.

Биёед мисолро дида бароем. Фарз мекунем, ки мо якчанд абзасҳо дорем:

<p>text1</p>
<p>text2</p>
<p>text3</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, ки ба таври ошкоро ба ранг -и мо ишора мекунад.

Абзас дода шудааст. Тугмаҳои 'перечеркнуть', 'сделать жирным', 'сделать красным' дода шудаанд. Бигзор баъди пахш кардан ба ҳар як тугма амали додашуда ба абзас рӯй диҳад (масалан, сурх шавад).