Przełączanie stylów przez atrybut data- w JavaScript

Aby rozwiązać problem opisany w poprzedniej lekcji, nie będziemy ustawiać elementowi klas, lecz będziemy zmieniać wartość atrybutu data-. Będzie to wygodne, ponieważ taki atrybut może mieć tylko jedną wartość i podczas zapisu nowa wartość automatycznie nadpisze starą.

Dla przykładu, w ten sposób ustawimy styl sukcesu:

<div id="elem" data-type="success">
	text
</div>

A tak styl dla błędu:

<div id="elem" data-type="error">
	text
</div>

Style naszych stanów ustawimy za pomocą selektorów atrybutów:

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

Teraz możemy łatwo pokolorować nasz element na kolor sukcesu:

elem.dataset.type = 'success';

A tak pokolorujemy na kolor błędu:

elem.dataset.type = 'error';

Dane jest pole input. Po utracie fokusu sprawdź wpisaną w niego liczbę. Jeśli ta liczba jest mniejsza lub równa dziesięciu, pokoloruj pole input na zielono, jeśli jest od jedenastu do dwudziestu - na żółto, a jeśli jest większa niż dwadzieścia - na czerwono.