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:

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

Y así el estilo para el error:

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

Definiremos los estilos de nuestros estados mediante selectores de atributos:

css[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:

javascriptelem.dataset.type = 'success';

Y así lo colorearemos con el color de error:

javascriptelem.dataset.type = 'error';