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

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

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

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

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

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

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

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

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

javascriptelem.dataset.type = 'success';

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

javascriptelem.dataset.type = 'error';