Question

我想通过onclick选择一个链接，当点击这样选择的链接时，背景应该改变。当我再次单击所选链接时，背景应该再次透明。

我的剧本：

<div style="background: transparent;" onclick="click()" id="0">

HTML：

点击

function click() {
  var click = document.getElementById("0");
  if(click.style.background == "transparent") {
    click.style.background = "red";
  }
  else {
    click.style.background = "transparent";
  }
}

Answer 1

这里有两件事，不要调用函数click，并使用backgroundColor属性，而不是background，因为background是一个复合属性，期望的值多于颜色，所以将它与颜色进行比较（即='透明' ）可能无法正常工作

所以

HTML：

<div style="background-color: transparent;" onclick="notclick()" id="0">

的Javascript

function notclick() {
  var click = document.getElementById("0");
  if(click.style.backgroundColor == "transparent") {
    click.style.backgroundColor = "red";
  }
  else {
    click.style.backgroundColor = "transparent";
  }
}

修改

处理mutliple div

你想要行为的每个div应该是这样的（即用onclick（this））

<div style="background-color: transparent;" onclick="notclick(this)" id="0"> <div style="background-color: transparent;" onclick="notclick(this)" id="1"> <div style="background-color: transparent;" onclick="notclick(this)" id="2">

并且javascript应该是

function notclick(ele) { if(ele.style.backgroundColor == "transparent") { ele.style.backgroundColor = "red"; } else { ele.style.backgroundColor = "transparent"; } }

或更好

function notclick(ele) { ele.style.backgroundColor = (ele.style.backgroundColor == "transparent" ? "red" :"transparent"); }

Answer 2

据我了解，您只需要切换。功能代码如下。

2个重要说明：

ID不能为零（或中断）：我将其替换为10;
不要使用click（），因为它是保留名称：我用toggle（）替换它。

除了上述内容之外，您的代码没有太大变化。欢呼声。

更新以处理多个div：我现在传递对象：

<html>
        <body>
            <div style="background: red;" onclick="toggle(this)" id="10">
                    CLICK ON 10 TO TOGGLE MY BACKGROUND COLOR
            </div>
            <div style="background: red;" onclick="toggle(this)" id="20">
                    CLICK ON 20 TO TOGGLE MY BACKGROUND COLOR
            </div>
            <script>
                function toggle(o) {
                  if(o.style.background == "transparent") {
                    o.style.background = "red";
                    alert("red on "+o.id);
                  }
                  else {
                    o.style.background = "transparent";
                    alert("transparent on "+o.id);
                  }
                }
            </script>
        </body>
</html>

Answer 3

问题是方法名称点击，在onclick处理程序中它引用内部点击方法 - fiddle - 这里click是本机方法，而不是我们的方法

重命名它应该没问题 - 您需要使用backgroundColor

<button onclick="testme()">Test</button>

然后

function testme() {
    var click = document.getElementById("0");
    if (click.style.background == "red") {
        click.style.background = "transparent";
    } else {
        click.style.background = "red";
    }
}

演示：Fiddle

Javascript if和else同时运行

3 个答案: