Question

我很困惑为什么onclick函数在第一次点击时没有注册。每次使用onclick触发器的div都必须在第一次点击两次。

function selected(elmnt) {
  if (elmnt.style.backgroundColor == "transparent")
    elmnt.style.backgroundColor = "#990000"
  else
    elmnt.style.backgroundColor = "transparent"
}

#container {
  background-color: transparent;
  height: 100px;
  width: 100px;
}

<div id="container" onclick="selected(this)">click me</div>

我在这里错过了什么吗？

Answer 1

这是因为您的元素样式不透明。只有您的元素computedStyle是。试试这个：

function selected(elmnt) {
  if (elmnt.style.backgroundColor == "transparent")
    elmnt.style.backgroundColor = "#990000"
  else
    elmnt.style.backgroundColor = "transparent"
}

#container {
  background-color: transparent;
  height: 100px;
  width: 100px;
}

<div id="container" onclick="selected(this)" style="background-color: transparent;">click me</div>

还有一种自然的方式：

function selected(elmnt) {
  if (elmnt.style.backgroundColor == "")
    elmnt.style.backgroundColor = "#990000"
  else
    elmnt.style.backgroundColor = ""
}

#container {
  background-color: transparent;
  height: 100px;
  width: 100px;
}

<div id="container" onclick="selected(this)">click me</div>

Answer 2

元素不是以透明的背景颜色开始，所以它总是转到else。将div更改为

<div id="container" onclick="selected(this)" style='background-color:transparent'>www</div>

会让它发挥作用。 css样式表不会在物理上为DOM元素添加样式。

Answer 3

上述两个答案绝对同意，最初的风格未设定。

告诉你下次如何调试它 us console.log（）单击F12查看开发人员工具，然后单击控制台选项卡

当简单的IF

时，我很喜欢短IF

 <script>
    function selected(elmnt) {
        console.log(elmnt.style.backgroundColor)
        var bG= elmnt.style.backgroundColor
        elmnt.style.backgroundColor = ( bG == '' || bG == "transparent") ? "#990000" : "transparent";
    }      
</script>

onclick触发器无法首次单击

3 个答案: