Stilizēšana ar CSS klasēm JavaScript

Iepriekšējā nodarbībā mēs iemācījāmies mainīt elementu CSS stilus, mainot style atribūtu. Visbiežāk tā nav īpaši laba ideja. Lieta tāda, ka, ja izkaisīt CSS stilus pa JavaScript kodu, nākotnē būs problemātiski mainīt vietnes dizainu, jo nāksies kārtāt JavaScript kodu, meklējot tajā ieslēptus stilus.

Ērtāk turpmākai uzturēšanai būs pievienot vai noņemt elementam CSS klases, tādējādi tos stilizējot vēlamajā veidā.

Apskatīsim piemērā. Pieņemsim, ka mums ir vairāki rindkopas:

<p>teksts1</p>
<p>teksts2</p>
<p>teksts3</p>

Izdarīsim tā, lai, uzklikšķinot uz jebkuras rindkopas, šī rindkopa iekrāsotos kādā krāsā, piemēram, zaļā. Lai to izdarītu, CSS failā izveidosim īpašu klasi rindkopu iekrāsošanai:

.colored {
	color: green;
}

Klases izmantošanas priekšrocība ir tā, ka tagad varēs viegli mainīt vēlamo krāsu - lai to izdarītu, vajadzēs tikai ievietot izmaiņas CSS failā, neieliekot rokās JavaScript kodu. Tas būs īpaši ērti gadījumā, ja JavaScript kodu rakstat jūs, bet turpmāk to stilizēs kāds cits (iespējams, mazāk kvalificēts cilvēks, kurš prot strādāt tikai ar CSS).

Tātad, tagad, pēc klases ieviešanas, uzklikšķinot uz jebkuras rindkopas, var mainīt tās krāsu, vienkārši pievienojot tai mūsu klasi:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // pievienojam rindkopai klasi
	});
}

Paskaidrojiet, kāpēc es izvēlējos klases nosaukumam vārdu colored, nevis vārdu green, kas tieši norāda uz mūsu vēlamo krāsu.

Dota rindkopa. Dotas pogas 'pārsvītrot', 'padarīt treknrakstā', 'padarīt sarkanu'. Lai, nospiežot katru pogu, dotā darbība notiek ar rindkopu (kļūst sarkana, piemēram).