Uvumilivu wa Mitindo kwa kutumia CSS Classes kwenye JavaScript

Katika somo lililopita tulijifunza kubadilisha mitindo ya CSS ya vipengele kupitia kubadilisha attribute style. Mara nyingi hii sio wazo nzuri. Jambo ni kwamba, ikiwa utatowanya mitindo ya CSS kwenye msimbo wa JavaScript, baadaye itakuwa shida kubadilisha muundo wa tovuti, kwani itabidi uchimbue msimbo wa JavaScript ukitafuta mitindo iliyowekwa humo.

Itakuwa rahisi zaidi kwa usaidizi wa baadaye kuongeza au kuondoa CSS classes kwa kipengele, na hivyo kukiweka mtindo unaofaa.

Wacha tuangalie kwa mfano. Hebu tuseme tuna aya kadhaa:

<p>nakala1</p>
<p>nakala2</p>
<p>nakala3</p>

Wacha tufanye ili kwa kubofya kwa aya yoyote, aya hii iwe na rangi fulani, kwa mfano, kijani. Kwa hili, kwenye faili ya CSS tutafanya darasa maalum la kuweka rangi kwa aya:

.colored {
	color: green;
}

Faida ya kutumia darasa ni kwamba sasa ni rahisi kubadilisha rangi unayotaka - kwa hili itabidi tu uingize mabadiliko kwenye faili ya CSS, bila kuchimbua msimbo wa JavaScript. Ni rahisi hasa katika kesi hiyo, ikiwa msimbo wa JavaScript unaandikwa na wewe, na baadaye kuuweka mtindo atakuwa mtu mwingine (labda mtu mwenye ustadi mdogo, anayeweza kufanya kazi tu na CSS).

Kwa hiyo, sasa, baada ya kuanzisha darasa, kwa kubofya kwa aya yoyote inaweza kubadilisha rangi yake, tu kwa kuongezea darasa letu:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // ongeza darasa kwenye aya
	});
}

Eleza, kwa nini niliichagua jina la darasa neno colored, badala ya neno green, linaonyesha wazi rangi tunayotaka.

Amepewa aya. Amepewa vitufe 'vuka', 'fanya iwe bold', 'fanya iwe nyekundu'. Hebu kwa kubonyeza kila kitufa kitendo kilichopewa kitoke kwa aya (ibadilike kuwa nyekundu, kwa mfano).