以编程方式更改按钮颜色答案

【问题标题】：Changing button color programmatically以编程方式更改按钮颜色
【发布时间】：2010-12-21 15:36:26
【问题描述】：

有没有办法以编程方式改变按钮的颜色，或者至少改变按钮标签的颜色？我可以用

更改标签本身

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

但是如何改变颜色呢？

【问题讨论】：

+1 只是因为我认为没有理由有人投票否决。

标签： javascript button label dashboard

【解决方案1】：

我终于找到了一个有效的代码 - 试试这个：

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

【讨论】：

document.getElementById("submit_button").style.backgroundColor = 'lightgreen'; // 这会保持悬停颜色变化

【解决方案2】：

这是一个使用 HTML 的示例：

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

这是一个使用 JavaScript 的示例：

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

【讨论】：

对不起，我把我对所有帖子的回复都放了两个帖子，今天太晚了:-(所以只是重复一遍，没有一个提案有效，虽然最后一个我不明白，所以我没有试试看。感谢您的进一步提示。

【解决方案3】：

最好更改类名：

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

然后在 CSS 中添加一个按钮样式，您可以在其中设置背景颜色和其他任何内容。

【讨论】：

感谢 Nathan/DOK，这些都不起作用。根本没有任何反应。奇怪的是，在 CSS 中按钮的颜色根本没有定义。如果我将其定义为颜色：#00cccc;然后它会（静态地）改变标签文本的颜色。我猜 Dashcode 有点具体，它是 Apple 化的 Javascript ......还有什么想法吗？谢谢 Zsolt
可能与按钮的 id 为按钮有关 - 可能将 id 更改为 'submit_button' 或其他东西
我马上改了id，我有保留字的偏执...但它不起作用。
你有没有在 CSS 中设置类？
是的#my_button { font-family: HelveticaNeue-Bold;字体大小：12px；文本对齐：居中；宽度：60px；光标：默认； -khtml-用户选择：无；位置：绝对；右：自动；边距顶部：0px；顶部：185 像素；底部：175px；高度：自动；左：109px；颜色：rgb(0, 204, 204); } 对不起，不知道如何做代码高亮...默认情况下颜色条目不存在，我手动添加了它，这改变了文本的颜色。我将其添加为 #cc0000 但 Daschode 将其转换为 rgb()

【解决方案4】：

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

【讨论】：

【解决方案5】：

如果你将它分配给一个类它应该可以工作：

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

【讨论】：

【解决方案6】：

我相信你想要 bgcolor。像这样的：

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

这里有几个演示可能会有所帮助：

Background Color

Background Color Changer

【讨论】：

【解决方案7】：

Try this code 你可能想要这样的东西

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

然后在您的 .js 文件中输入此内容。确保您的 html 已连接到您的 .js

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

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

【讨论】：