სტილიზაცია კლასებით JavaScript-ში

ელემენტების სტილიზაცია style ატრიბუტის მეშვეობით ზოგჯერ მოსახერხებელია, მაგრამ უმეტეს შემთხვევაში - არ არის ყველაზე კარგი იდეა. პრობლემა ისაა, რომ სტილები იქნება გაბნეული JavaScript ფაილში და მათი შეცვლა შრომატევადი იქნება. გაცილებით მოსახერხებელია სტილების მინიჭება CSS ფაილებში, რათა მათი შეცვლა მარტივი იყოს, JavaScript კოდში ჩაღრმავების გარეშე.

მაგალითად, დავუშვათ გვაქვს ელემენტი, რომელიც აჩვენებს გარკვეულ შეტყობინებას. შეტყობინება შეიძლება იყოს "კარგი" და გამოისახოს მწვანე ფერად და "ცუდი" და გამოისახოს წითელი ფერად. ამ შემთხვევაში საუკეთესო გადაწყვეტა იქნება ამისთვის შესაბამისი CSS კლასების შექმნა:

.success {
	color: green;
}
.error {
	color: red;
}

ახლა "კარგი" შეტყობინების გამოტანისას ჩვენ მივცემთ ელემენტს "კარგ" კლასს:

elem.textContent = 'good';
elem.classList.add('success');

და "ცუდი" შეტყობინების გამოტანისას ჩვენ მივცემთ ელემენტს "ცუდ" კლასს:

elem.textContent = 'bad';
elem.classList.add('error');

მოცემულია აბზაცები რიცხვებით. მოახდინეთ მათი გავლა ციკლით და აბზაცები, რომლებიც შეიცავენ ლუწ რიცხვებს, გააფერადეთ წითლად, ხოლო those containing odd numbers - in green.