以编程方式更改按钮颜色
Posted
技术标签:
【中文标题】以编程方式更改按钮颜色【英文标题】：Changing button color programmatically 【发布时间】：2010-12-21 15:36:26 【问题描述】：有没有办法以编程方式改变按钮的颜色，或者至少改变按钮标签的颜色？ 我可以用
更改标签本身document.getElementById("button").object.textElement.innerText = "newlabel";
但是如何改变颜色呢？
【问题讨论】：
+1 只是因为我认为没有理由有人投票否决。 【参考方案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";
;
【讨论】：
以上是关于以编程方式更改按钮颜色的主要内容，如果未能解决你的问题，请参考以下文章
以编程方式从 Appcompat 22.2.0 更改浮动操作按钮的颜色
以编程方式从 Appcompat 22.2.0 更改浮动操作按钮的颜色
以编程方式从 Appcompat 22.2.0 更改浮动操作按钮的颜色
如何更改以编程方式创建的一组 UIButton 的标题颜色？