web-dev-qa-db-fra.com

Changer la couleur du bouton par programmation

Est-il possible de changer la couleur d'un bouton, ou au moins la couleur de l'étiquette du bouton par programmation? 

document.getElementById("button").object.textElement.innerText = "newlabel";

Mais comment changer la couleur?

javascriptbuttonlabeldashboard
21
Zsolt

J'ai enfin trouvé un code de travail - essayez ceci:

document.getElementById("button").style.background='#000000';
22
Maurizio Pozzobon

Voici un exemple utilisant HTML:

<input type="button" value="click me" onclick="this.style.color='#000000';
this.style.backgroundColor = '#ffffff'" />

Et voici un exemple utilisant JavaScript:

document.getElementById("button").bgcolor="#Insert Color Here";
6
Nathan Campos

Il est probablement préférable de changer le className:

document.getElementById("button").className = 'button_color';

Ensuite, vous ajoutez un style de bouton au CSS où vous pouvez définir la couleur de fond et tout le reste.

5
matpol
use jquery :  $("#id").css("background","red");
1
Praveen Kumar K R

Je crois que tu veux bgcolor. Quelque chose comme ça:

document.getElementById("button").bgcolor="#ffffff";

Voici quelques démos qui pourraient vous aider:

Couleur de fond

Changeur de couleur de fond

0
DOK

Si vous l'assignez à une classe, cela devrait fonctionner:

<script>
  function changeClass(){
    document.getElementById('myButton').className = 'formatForButton';
  }
</script>

<style>
  .formatForButton {
    background-color:pink;
   }
</style>

<body>
  <input id='myButton' type=button class=none value='Change Color to pink' onclick='changeClass()'>
</body>
0
Jonathan Fascetti

Essayez ce code Vous voudrez peut-être quelque chose comme ceci 

<button class="normal" id="myButton" 
        value="Hover" onmouseover="mouseOver()" 
        onmouseout="mouseOut()">Some text</button>

Ensuite, dans votre fichier .js, entrez ceci. Assurez-vous que votre code HTML est connecté à votre fichier .js.

var tag=document.getElementById("myButton");

function mouseOver() {
    tag.style.background="yellow";
};
function mouseOut() {
    tag.style.background="white";
};
0
user9919032