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

How can I change the colour of a button using JavaScript?

本文关键字：按钮 颜色 何使用 JavaScript      更新时间：2023-09-26

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

<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，铬，但它不会点击回白色。IE显示"页面错误"。按钮HTML代码为：

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

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

背景颜色的计算样式的格式为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;

这将可靠地切换。

相关文章：