Alternancia de estilos mediante el atributo data- en JavaScript
Para resolver el problema descrito en la lección anterior,
no asignaremos clases al elemento, sino que
cambiaremos el valor del atributo data-.
Esto será conveniente porque dicho atributo
solo puede tener un valor
y al asignar uno nuevo, este
sobrescribirá automáticamente al anterior.
Por ejemplo, así asignaremos el estilo de éxito:
<div id="elem" data-type="success">
texto
</div>
Y así el estilo para el error:
<div id="elem" data-type="error">
texto
</div>
Definiremos los estilos de nuestros estados mediante selectores de atributos:
[data-type="success"] {
color: green;
}
[data-type="warning"] {
color: orange;
}
[data-type="error"] {
color: red;
}
Ahora podemos fácilmente colorear nuestro elemento con el color de éxito:
elem.dataset.type = 'success';
Y así lo colorearemos con el color de error:
elem.dataset.type = 'error';
Se da un input. Al perder el foco, verifique el número introducido en él. Si este número es menor o igual a diez, coloree el input de verde, si está entre diez y veinte - de amarillo, y si es mayor a veinte - de rojo.
