Toogle Online/Offline

Question Stackoverflow: https://pt.stackoverflow.com/questions/324022/como-fazer-um-texto-ficar-de-uma-cor-e-voltar-%C3%A0-original#

by leonardomsnt

HTML

<a href="#" onclick="myFunction(this)"><i class="fa fa-circle text-success MINHA_CLASSE_VERDE" id="foo"></i> Online</a>


<script>
  var online = true;

  function myFunction(e) {
    online = !online;
    e.innerHTML = online ? '<i class="fa fa-circle text-success MINHA_CLASSE_VERDE" id="foo"></i> Online' : '<i class="fa fa-circle text-success MINHA_CLASSE_VERMELHA" id="foo"></i> Offilne';
  }

</script>

<style>
  #foo {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    display: block;
    display: inline-block;
  }

  .MINHA_CLASSE_VERDE {
    background: darkgreen;
  }

  .MINHA_CLASSE_VERMELHA {
    background: darkred;
  }

</style>