JavaScript-те data- сипаттамасы арқылы стильдерді ауыстыру

Алдыңғы сабақта сипатталған мәселені шешу үшін, біз элементке кластар бермейміз, instead 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';

Инпут берілген. Фокус жоғалған кезде ішіндегі енгізілген санды тексеріңіз. Егер сан оннан кіші болса, онда инпутті жасыл түске бояңыз, егер оннан жиырмаға дейін болса - сары түске, ал егер жиырмадан ассa - қызыл түске.