JavaScript-də CSS sinifləri ilə stil vermə

Əvvəlki dərsdə biz elementlərin CSS stillərini style atributunu dəyişməklə necə dəyişməyi öyrəndik. Çox vaxt bu çox yaxşı bir fikir deyil. Bu ondan irəli gəlir ki, əgər CSS stilləri JavaScript koduna səpələsək, gələcəkdə saytın dizaynını dəyişmək problemli olacaq, çünki orada gizlənmiş stilləri axtarmaq üçün JavaScript kodunu dəyişdirmək məcburiyyətində qalacağıq.

Gələcək dəstək üçün daha əlverişli olan, elementə CSS sinifləri əlavə etmək və ya onları çıxarmaq, beləliklə onları lazımi şəkildə stilə etməkdir.

Gəlin bir nümunəyə baxaq. Tutaq ki, bizim bir neçə abzasımız var:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Gəlin elə edək ki, hər hansı bir abzasa klikləndikdə, həmin abzas hansısa bir rəngə, məsələn, yaşıl rəngə boyansın. Bunun üçün CSS faylında abzasları rəngləndirmək üçün xüsusi bir sinif yaradaq:

.colored {
	color: green;
}

Sinifdən istifadənin üstünlüyü ondadır ki, indi istənilən rəngi asanlıqla dəyişmək olar - bunun üçün sadəcə CSS faylında dəyişiklik etmək lazımdır, JavaScript koduna toxunmadan. Xüsusilə əlverişli olacaq, əgər JavaScript kodunu siz yazırsınızsa və gələcəkdə onu başqası stilə edəcəksə (bəlkə də yalnız CSS ilə işləyə bilən daha az ixtisaslı insan).

Beləliklə, indi sinifi təqdim etdikdən sonra, hər hansı bir abzasa kliklədikdə onun rəngini dəyişmək olar, sadəcə ona bizim sinifimizi əlavə etməklə:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // abzasa sinif əlavə edirik
	});
}

Izah edin ki, niyə mən sinifin adı üçün açıq şəkildə istədiyimiz rəngi göstərən green sözü deyil, colored sözünü seçdim.

Bir abzas verilib. 'üstünü xət çək', 'qalın et', 'qırmızı et' düymələri verilib. Hər bir düyməyə basıldıqda göstərilən əməliyyat abzasla baş versin (məsələn, qırmızı olur).