სტილების მონაცვლეობა data- ატრიბუტის მეშვეობით JavaScript-ში

წინა გაკვეთილში აღწერილი პრობლემის გადასაჭრელად, ჩვენ არ მივანიჭებთ ელემენტს კლასებს, არამედ შევცვლით data- ატრიბუტის მნიშვნელობას. ეს მოსახერხებელი იქნება იმით, რომ ასეთ ატრიბუტს შეიძლება ჰქონდეს მხოლოდ ერთი მნიშვნელობა და ახალი მნიშვნელობის ჩაწერისას ძველი თავისით გადაიფარება.

მაგალითისთვის, ასე მივანიჭებთ წარმატებული სტილი:

<div id="elem" data-type="success">
	text
</div>

ხოლო ასე შეცდომის სტილი:

<div id="elem" data-type="error">
	text
</div>

ჩვენი მდგომარეობების სტილებს მივანიჭებთ ატრიბუტის სელექტორების მეშვეობით:

[data-type="success"] {
	color: green;
}
[data-type="warning"] {
	color: orange;
}
[data-type="error"] {
	color: red;
}

ახლა ჩვენ მარტივად შეგვიძლია გავაფერადოთ ჩვენი ელემენტი წარმატების ფერში:

elem.dataset.type = 'success';

ხოლო ასე გავაფერადებთ შეცდომის ფერში:

elem.dataset.type = 'error';

მოცემულია ინფუთი. ფოკუსის დაკარგვაზე შეამოწმეთ მასში შეყვანილი რიცხვი. თუ ეს რიცხვი ათამდეა, მაშინ გააფერადეთ ინფუთი მწვანე ფერში, თუ ათიდან ოცამდე - ყვითელში, ხოლო თუ ოცზე მეტია - წითელში.