Чередование стилей через data- атрибут в JavaScript

Барои ҳалли мушкилие, ки дар дарси қаблӣ шарҳ дода шуд, мо ба элемент синфҳо намедиҳем, балки қимати атрибути data--ро тағйир медиҳем. Ин роҳ муосир аст, зеро чунин атрибут метавонад фақат як қимат дошта бошад ва ҳангоми навиштан қимати нав худ ба худ қимати қадимро нест мекунад.

Масалан, барои услуби муваффақ чунин мекунем:

<div id="elem" data-type="success">
	матн
</div>

Ва барои услуби хатогӣ чунин:

<div id="elem" data-type="error">
	матн
</div>

Услубҳои ҳолатҳои моро тавассути интихобкунандаҳои атрибут муайян мекунем:

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

Акнун мо осон метавонем элементи худро ба ранги муваффақ оро диҳем:

elem.dataset.type = 'success';

Ва барои ранги хатогӣ чунин мекунем:

elem.dataset.type = 'error';

Як воридиди дода шудааст. Пас аз аз даст додани фокус, рақами воридшударо тафтиш кунед. Агар ин рақам аз даҳ камтар бошад, воридиро ба ранги сабз оро диҳед, агар аз даҳ то бист бошад - ба зард, ва агар аз бист зиёд бошад - ба сурх.