Наизменице стилова кроз 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';

Дато је поље за унос (инпут). При губитку фокуса проверите унесени број у њему. Ако је тај број до десет, обојите инпут у зелену боју, ако је од десет до двадесет - у жуту, а ако је већи од двадесет - у црвену.