Change color icon button javascript

Question

Change color icon button javascript

Navigation

#1 by (5 votes)

2

I have the button:

<button id="btnVoltar" style="margin-bottom:0;vertical-align:middle" type="button" class="btn-flat bg-red btn-circle-lg waves-effect" onclick="voltaparaConsulta()">
    <i class="material-icons">arrow_back</i>
</button>

I can change the icon color of it with a javascript without problem using the syntax below:

document.getElementById("btnEditar").style.color = "#FFFFFF";

But I wanted this to be changed only if the button was disabled. To let disable use the following syntax:

document.getElementById("btnEditar").disabled = true;

How do I do this?

javascript css

asked by anonymous 17.07.2017 / 17:38

1 answer

jQuery "contains word" selector does not work as expected Event onmouseover random colors

score 5 · Accepted Answer

Using CSS with the pseudo class disabled . You set the color in CSS, and disable the button with JavaScript normally.

See working:

document.getElementById('desativar').addEventListener('click', function() {
  document.getElementById("btnVoltar").disabled = true;
});

button:disabled {
  color: #FFFFFF;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet" />

<button id="btnVoltar">
    <i class="material-icons">arrow_back</i>
</button>

<button id="desativar">Clique para desabilitar o botão</button>