单击时JavaScript按钮样式更改
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单击时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)";
}
答案
我会使用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
接下来,将它放在您的高亮功能中:
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类。
另一答案
@Ruben-J答案很好。但是存在语法错误 - 您应该使用element.className而不是element.class。
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
以下是使用正确语法的更新答案:
function highlight(id) {
var element = document.getElementById(id);
element.className = (element.className == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}
还注意到他的答案没有显示html。确保传递id元素,而不是id的名称。
以上是关于单击时JavaScript按钮样式更改的主要内容,如果未能解决你的问题,请参考以下文章