单击时更改JavaScript按钮样式

我已经编写了这段JavaScript，但作为一名新手，我正在努力编写代码。我想做的是当一个按钮被点击时，它会改变背景色的不透明度。下面的代码可以做到这一点，但现在我希望再次单击该按钮时将其恢复为正常状态

我该怎么做？谢谢

正常状态：background=“rgba（255,0,0,0.8）”；按下状态： 背景=“rgba（255,0,0,0.6）”

---

我会使用CSS类：

.opacityClicked{
  background:rgba(255,0,0,0.8);
}
.opacityDefault{
  background:rgba(255,0,0,0.6);
}

并将您的功能更改为：

function highlight(id) {
    var element = document.getElementById(id);
    element.class = (element.class == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}

或者如果您只想使用JavaScript

var isClicked = false;
function highlight(id) {
    isClicked = !isClicked;
    var element = document.getElementById(id);
    element.style.background = (isClicked  == true) ? "rgba(255,0,0,0.6)" : "rgba(255,0,0,0.8)";
}

更新（请参阅备注：如果使用2个按钮）：

var buttonClicked = null;
function highlight(id) {
    if(buttonClicked != null)
    {
        buttonClicked.style.background = "rgba(255,0,0,0.8)";
    }

    buttonClicked  = document.getElementById(id);
    buttonClicked.style.background =  "rgba(255,0,0,0.6)";
}

---

你可以做一些非常快的事情，比如：

首先，向页面添加隐藏的输入元素，如下所示：

<input type="button" id="foobar" value="FooBar!" onclick="highlight('foobar')" style="background-color:rgba(255,0,0,0.8);" />

<input type="hidden" id="one_neg_one" value="1" />  <= hidden element

---

这应该行得通，尽管我同意前面的一个答案，您应该使用css类来实现这一点。

@Ruben-J answer很好用。但是存在语法错误-您应该改用element.className而不是element.class

以下是使用正确语法的更新答案：

function highlight(id) {
   var element = document.getElementById(id);
   element.className = (element.className == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}

---

还注意到这个答案没有显示HTML。确保通过id元素，而不是id的名称。

非常感谢，绝对完美！：）还有一个问题，如果我有两个按钮，当我点击其中一个按钮时，另一个按钮会在这个按钮高亮显示时将其状态更改回正常状态，该怎么办？此外，当我再次单击突出显示的按钮时，应将其状态更改回正常状态。。（简而言之，一次突出显示一个按钮）。非常感谢。

function highlight(id) {
    var a = 7;
    var o = document.getElementById("one_neg_one");
    var newa = (a + (parseInt(o.value) * -1)) * 0.1;
    document.getElementById(id).style.background="rgba(255,0,0," + newa + ")";
    o.value = o.value * -1;
}

function highlight(id) {
   var element = document.getElementById(id);
   element.className = (element.className == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}