如何使用 JavaScript 更改按钮的颜色？答案

【问题标题】：How can I change the colour of a button using JavaScript?如何使用 JavaScript 更改按钮的颜色？
【发布时间】：2014-09-09 22:37:54
【问题描述】：

如果再次单击，我想将鼠标单击时按钮的线圈从白色更改为红色，然后从红色变回白色。我试过这样：

<script language="JavaScript">
<!--
function changecolor(Id){
var series = "0";

var a = window.getComputedStyle(document.getElementById(Id)).backgroundColor;

var b = 2
if (a == "#FF4F4F") {
    b = 1
}

if (b == 1) {
    document.getElementById(Id).style.backgroundColor = "#FFFFFF";
}

if (b == 2) {
    document.getElementById(Id).style.backgroundColor = "#FF4F4F";
}

}   
//-->
</script>

这行不通。这将使按钮在 mozilla、chrome 中变为红色，但不会单击返回为白色。 IE 说“页面错误”。按钮 HTML 代码为：

<input type = "button" Id = "01" value="01" onClick="changecolor('01')">

我的 CSS 样式中缺少一些东西。看起来第一次读取（颜色）是一个空值，但它确实使按钮变红 - 在两个浏览器中 - 我的这个函数的构造方式。然后看起来if条件不正常，看红变白。

【问题讨论】：

您的按钮代码丢失了，这将有助于我们更好地了解问题所在。
为什么你的脚本元素中有 HTML cmets？你试过console.log(a)吗？我敢打赌，您得到的结果与您正在测试的十六进制颜色无关。
这篇文章与stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb类似的一篇文章有关
@DavidThomas 脚本元素中的 HTML cmets 可以追溯到 IE 2.0/3.0 时代，当时 JavaScript 刚出现并显示了 script 元素的内容。 20 多年以来，它们一直没有被需要，但它们出现在货物狂热的节目中。
脚本元素的语言属性在 15 年前的 HTML 4 中被弃用，在 HTML5 中被删除。脚本元素中的 HTML 注释分隔符已经不再需要了。

标签： javascript button colors

【解决方案1】：

背景颜色的计算样式为rgb(###, ###, ###) 格式（或其变体，例如不同的空格或rgba）因此与#xxxxxx 比较将不起作用。

由于您分配给style.backgroundColor，您可以简单地回读：

var elem = document.getElementById(Id);
if( elem.style.backgroundColor == "#FF4F4F") {
    elem.style.backgroundColor = "#FFFFFF";
}
else {
    elem.style.backgroundColor = "#FF4F4F";
}

根据需要随意切换大小写（根据第一次应该如何更改），但这会起作用，因为浏览器会保留您分配给它的任何内容。

但是，一般来说，您应该有一个更可靠的切换：

var elem = document.getElementById(Id);
if( elem._toggle) {
    elem.style.backgroundColor = "#FFFFFF";
}
else {
    elem.style.backgroundColor = "#FF4F4F";
}
elem._toggle = !elem._toggle;

这将可靠地切换。

【讨论】：

添加和删除一个改变样式的类会更好，这样可以避免设置和获取颜色值的变幻莫测。