JavaScript ulanyp CSS klasslary bilen stil bermek

Öňki sapakda biz elementleriň CSS stillerini style atributyny üýtgetmek üsti bilen üýtgetmek öwrendik. Köplenç bu gowy pikirlenme däldir. Sebäbi, CSS stilleri JavaScript kodyna saýsak, indiki wagtda saýtyň dizaýnyny üýtgetmek kyn bolar, sebäbi ýazylyp goýulan stilleri gözlemek üçin JavaScript kodyna girmeli bolar.

Indiki goldawy üçin has amatly bolary, elemente CSS klasslary goşup ýa-da aýyryp, olary islenilen görnüşde stil etmekdir.

Mysala serediň. Bizde birnäçe abzas bolsun:

<p>tekst1</p>
<p>tekst2</p>
<p>tekst3</p>

Geliň, islendik abzas basylsa, şol abzas bir reňke, meselem, ýaşyl reňke bolar ýaly edeliň. Bunuň üçin CSS faýlynda abzalary boýamak üçin ýörite klas düzeliň:

.colored {
	color: green;
}

Klassy ulanmagyň peýdasy şonda, indi islenilen reňki üýtgetmek aňsat bolar - munuň üçin diňe CSS faýlyna üýtgeşme girizmeli, JavaScript kodyna ýol bermeli däldir. Has amatly bu ýagdaýda bolar, eger JavaScript kody size degişli bolsa we indiki wagtda ony başga biri (balkim diňe CSS bilen işlemek bilen ugraýan az kämil adam) stil etmeli bolsa.

Şeýlelik bilen, indi, klasy girizenimizden soň, islendik abzasa basylsa, onuň reňkini üýtgetmek mümkin, diňe oňa biziň klasymyzy goşup:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // abzasa klas goşýarys
	});
}

Düşündiriň, näme üçin men klasyň ady üçin colored sözüni saýladym, ýöne green sözüni däl, bize islenýän reňk hakynda açyk görkezýän.

Abzas berlen. Düwmeler berlen 'üsti çyzylan etmek', 'gaty etmek', 'gyzyl etmek'. Her bir düwmä basylşynda, berilen hereket abzas bilen bolsun (meselem, gyzyl bolar).