Changing button color programmatically

2019-02-16 07:23发布

站内问答 / JavaScript
704 7 6

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?

7条回答
趁早两清
2楼-- · 2019-02-16 07:56

I have finally found a working code - try this:

document.getElementById("button").style.background='#000000';
查看更多
0人赞 添加讨论(0) 举报
够拽才男人
3楼-- · 2019-02-16 07:59 
use jquery :  $("#id").css("background","red");
查看更多
0人赞 添加讨论(0) 举报
聊天终结者
4楼-- · 2019-02-16 08:03

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

查看更多
0人赞 添加讨论(0) 举报
淡お忘
5楼-- · 2019-02-16 08:07

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";
};
查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
6楼-- · 2019-02-16 08:11

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.

查看更多
0人赞 添加讨论(0) 举报
做个烂人
7楼-- · 2019-02-16 08:13

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>
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)