JavaScript'те data- атрибуту аркылуу стилдерди алмаштыруу

Мурунку сабакта сүрөттөлгөн маселени чечүү үчүн, биз элементке класс бербей, анын ордуна 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';

Input берилген. Ага киргизилген санды фокусту жоготкондо текшериңиз. Эгер ал сан ондон кичине болсо, анда input'ту жашыл түскө бояңыз, эгер ондон жыйырмага чейин болсо - сары түскө, ал эми жыйырмадан жогору болсо - кызыл түскө.