4

我已经将这段 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)";
}
4

3 回答 3

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)";
}
于 2013-04-24T12:23:35.730 回答
0

你可以像这样快速地做一些事情：

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

<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

接下来，把它放在你的 highlight 函数中：

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-24T12:41:27.410 回答
0

@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 的名称。

于 2019-04-16T11:27:52.853 回答