Чаргаванне стыляў праз 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';

Дадзены інпут. Па страце фокусу праверце ўведзенае ў яго лік. Калі гэта лік да дзесяці, то пафарбуйце інпут у зялёны колер, калі ад дзесяці да дваццаці - у жоўты, а калі больш за дваццаць - у чырвоны.