სტილიზაცია 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, რომელიც ცხადად მიუთითებს ჩვენთვის სასურველ ფერზე.

მოცემულია აბზაცი. მოცემულია ღილაკები 'გადახაზვა', 'სქელად გაკეთება', 'წითელად გაკეთება'. დავუშვათ, რომ თითოეულ ღილაკზე დაწკაპუნებისას მოცემული მოქმედება მოხდება აბზაცთან (მაგალითად, გახდეს წითელი).