Changing button color programmatically

Question

Is there a way to change the color of a button, or at least the color of the button label programmatically? I can change the label itself with

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

But how to change the color?

+1 simply because i see no reason for someone voting this down. — Jimmeh, Nov 30 '09 at 13:43

score 47 · Answer 1 · edited Sep 10 '14 at 07:13

47

I have finally found a working code - try this:

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

edited Sep 10 '14 at 07:13

Henrik Christensen

524
5
14

answered Nov 13 '10 at 09:11

Maurizio Pozzobon

3,044
7
34
44

2

document.getElementById("submit_button").style.backgroundColor = 'lightgreen'; // this keeps the hover color change – xinthose Apr 15 '15 at 16:02

score 7 · Answer 2 · answered Nov 30 '09 at 13:49

7

Here is an example using HTML:

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

And here is an example using JavaScript:

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

answered Nov 30 '09 at 13:49

Nathan Campos

28,769
59
194
300

Sorry I put my reply to all posts two posts above, was to late yeterday :-( So just to repeat, none of the proposals work, although the last one I do not understand so I did not try it. Thanks for further hints. – Zsolt Dec 01 '09 at 06:53

score 6 · Answer 3 · edited Nov 30 '09 at 13:53

6

Probably best to change the className:

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

Then you add a buton style to the CSS where you can set the background color and anything else.

edited Nov 30 '09 at 13:53

Nathan Campos

28,769
59
194
300

answered Nov 30 '09 at 13:51

matpol

3,042
1
15
18

Thanks Nathan/DOK, none of these work. Simply nothing happens. Strange thing is that in CSS the color of the button is not defined at all. If I define it like color: #00cccc; then it changes (statically) the color of the label text.. Dashcode is a bit specific I guess, it is Apple-ized Javascript... Any further idea? Thanks Zsolt – Zsolt Nov 30 '09 at 22:14
might be something to with the id of the button being button - perhaps change the id to 'submit_button' or something – matpol Dec 01 '09 at 09:01
I changed the id right away, I have paranoia from reserved words...but it does not work. – Zsolt Dec 02 '09 at 08:16
do you have the class set up in the CSS? – matpol Dec 02 '09 at 08:45
Yes #my_button { font-family: HelveticaNeue-Bold; font-size: 12px; text-align: center; width: 60px; cursor: default; -khtml-user-select: none; position: absolute; right: auto; margin-top: 0px; top: 185px; bottom: 175px; height: auto; left: 109px; color: rgb(0, 204, 204); } sorry, do not know how to do code highlight... by default the color entry is not there, I added it by hand, and this changed the color of the text. I added it as #cc0000 but Daschode converts it into rgb() – Zsolt Dec 02 '09 at 11:08
The thing is that if I check the value of the document.getElementById("my_button").object.textElement.color then it picks up the newly set value, but this has no influence on visual appearance of the button itself, so it it either not .color or object.textElement.color. – Zsolt Dec 02 '09 at 11:14
you need to change the classname on document.getElementById("my_button") I don't think you need the object.textElement bit – matpol Dec 02 '09 at 12:23
sorry, I don't get it, can you point me to some URL where this is explained? – Zsolt Dec 02 '09 at 13:17
now I tried this document.getElementById("my_button").setAttribute("class", "my_button2"); where the my_button2 has a different color then my_button, also does not work :-( – Zsolt Dec 02 '09 at 13:32

score 1 · Answer 4 · answered Sep 01 '14 at 09:55

1

use jquery :  $("#id").css("background","red");

answered Sep 01 '14 at 09:55

Praveen Kumar K R

1,762
2
11
7

score 1 · Answer 5 · edited Jun 09 '18 at 23:17

Try this code You may want something like this

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

Then on your .js file enter this.Make sure your html is connected to your .js

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

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

score 1 · Answer 6 · answered Aug 24 '18 at 18:41

1

If you assign it to a class it should work:

<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>

answered Aug 24 '18 at 18:41

Jonathan Fascetti

113
8

-1 for something which is *NOT* possible programatically! Well, OK, you /could/ create a new style element with an overridden "pink", but I doubt you even thought of that. – Pete Lomax Apr 18 '22 at 00:36

score 0 · Answer 7 · answered Nov 30 '09 at 13:51

0

I believe you want bgcolor. Something like this:

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

Here are a couple of demos that might help:

Background Color

Background Color Changer

answered Nov 30 '09 at 13:51

DOK

32,337
7
60
92

Changing button color programmatically

7 Answers7

Linked