JavaScript按钮样式点击变化

我已经把这段JavaScript放在一起，但我正在努力与代码，因为我是一个新手。我想要做的是当点击一个按钮时，它会改变背景颜色不透明度。下面的代码是这样做的，但现在我希望当我再次单击它时，按钮将恢复到正常状态。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)"; 
}

来源

2013-04-24 Adrian M.

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

来源

2013-04-24 12:23:35

非常感谢，绝对完美！ :) – 2013-04-24 12:42:55

还有一个问题，如果我有2个按钮，当我点击其中一个按钮时，另一个应该将它的状态恢复到正常状态，因为这个按钮会突出显示？另外，当我再次单击突出显示的按钮时，应将其状态恢复到正常状态。（因此，一次只突出显示一个按钮）。谢谢！ – 2013-04-24 13:05:31

更新了答案 – 2013-04-24 13:10:58

你可以做一些非常快这样的：

首先，一个隐藏的输入元素添加到您的页面，如下所示：

<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

接下来，把这个在您的亮点功能：

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; 
}

这应该工作，虽然我同意以前的答案，你应该使用一个CSS类。

来源

2013-04-24 12:41:27 musicmunky

JavaScript按钮样式点击变化

回答

相关问题