单击时更改 JavaScript 按钮样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16191808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript Button Style change on click
提问by Adrian M.
I have put together this piece of JavaScript, but I am struggling with the code as I'm a newbie. What I want to do is when a button is clicked it will change the background color opacity. The code below does this, but now I want the button to be reverted to the normal state when I click it again.
我已经将这段 JavaScript 放在一起，但由于我是新手，我正在努力处理代码。我想要做的是当一个按钮被点击时，它会改变背景颜色的不透明度。下面的代码执行此操作，但现在我希望再次单击该按钮时将其恢复为正常状态。
How can I do this? Thanks..
我怎样才能做到这一点？谢谢..
Normal state: background="rgba(255,0,0,0.8)"; Pressed state: background="rgba(255,0,0,0.6)";
正常状态：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)";
}
回答by Ruben-J
I would use a CSS class:
我会使用一个 CSS 类：
.opacityClicked{
background:rgba(255,0,0,0.8);
}
.opacityDefault{
background:rgba(255,0,0,0.6);
}
And change your function to:
并将您的功能更改为：
function highlight(id) {
var element = document.getElementById(id);
element.class = (element.class == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}
Or if you want to use only JavaScript
或者如果您只想使用 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)";
}
Update(See comments: if you use 2 buttons):
更新（见评论：如果你使用 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)";
}
回答by musicmunky
You could do something really quick like this:
你可以像这样快速地做一些事情：
First, add a hidden input element to your page like so:
首先，向您的页面添加一个隐藏的输入元素，如下所示：
<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
Next, put this in your highlight function:
接下来，把它放在你的高亮功能中：
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;
}
That should work, although I agree with a previous answer that you should use a css class for this.
这应该可行，尽管我同意之前的答案，您应该为此使用 css 类。
回答by S. Bindloss
@Ruben-J answer works fine. There is a syntax error though - you should instead use element.classNamerather than element.class.
@Ruben-J 答案很好。但是有一个语法错误 - 您应该使用element.className而不是 element.class。
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
Below is an updated answer using the correct syntax:
以下是使用正确语法的更新答案：
function highlight(id) {
var element = document.getElementById(id);
element.className = (element.className == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}
Also noticed that this answer doesn't show the HTML. Make sure to pass through the id element, not the nameof the id.
还注意到这个答案没有显示 HTML。确保通过 id 元素，而不是id的名称。
