单击时JavaScript按钮样式更改

Question

我把这段JavaScript放在一起,但我正在努力使用代码,因为我是新手.我想要做的是当点击一个按钮时,它将改变背景颜色的不透明度.下面的代码执行此操作,但现在我希望当我再次单击它时按钮恢复到正常状态.

我怎样才能做到这一点？谢谢..

正常状态:background ="rgba(255,0,0,0.8)"; 按下状态:background ="rgba(255,0,0,0.6)";

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

Answer 1

我会使用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)";
}