Alternância de estilos via atributo data- em JavaScript

Para resolver o problema descrito na lição anterior, não vamos definir classes para o elemento, mas sim mudar o valor do atributo data-. Isso será conveniente porque tal atributo só pode ter um valor e, ao ser definido, o novo valor substituirá automaticamente o antigo.

Por exemplo, assim definiremos o estilo de sucesso:

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

E assim o estilo para erro:

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

Definiremos os estilos dos nossos estados através de seletores de atributo:

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

Agora podemos facilmente colorir nosso elemento com a cor de sucesso:

elem.dataset.type = 'success';

E assim colorimos com a cor de erro:

elem.dataset.type = 'error';

É dado um input. Ao perder o foco, verifique o número nele inserido. Se for um número até dez, pinte o input de verde, se for de dez a vinte - de amarelo, e se for mais de vinte - de vermelho.