Question

我有一个关于让一个元素变成白色的问题，再次点击一个红色。我用铬。此外，我不明白我是如何做到这一点的，所以我希望得到一个详细的答复。

<html>
  <head>
    <script>
        var color = document.querySelectorAll('h1')
        color.onclick = function(){
          if (this.style.backgroundColor == 'red') {
            this.style.backgroundColor = 'white'
            this.style.color = 'white'
          }
          if (this.style.backgroundColor == 'blue') {
            this.style.backgroundColor = 'white'
            this.style.color = 'white'
          }
          if (this.style.backgroundColor == 'white') {
            this.style.backgroundColor = 'red'
            this.style.color = 'red'
          }

        }
    </script>

  </body>
</html>

（编辑）很抱歉我没有添加一个片段，我正在添加这个编辑。我希望有更详细的解释，谢谢。我试图在谷歌搜索，在这个网站上搜索，并提出这个问题。（编辑）

Answer 1

如果没有一些示例代码，确切地解决您正在尝试做的事情有点困难，但是如果我理解您正在尝试正确执行的操作，那么您将尝试在点击时替换背景颜色。

首先，您要选择页面上的元素。然后应用单击处理程序。在此单击处理程序内部，您希望使用 style property 检查条件中的背景颜色。如果颜色为红色，则将其设置为白色。如果颜色不是红色，则将其设置为红色。

这可以在以下示例中看到：

var example = document.getElementById('example');
example.onclick = function() {
  if (this.style.backgroundColor == 'red') {
    this.style.backgroundColor = 'white'
  }
   else {
     this.style.backgroundColor = 'red'
   }
}

<div id="example">Text</div>

希望这有帮助！：）

单击后使元素变为白色，再次单击则变为红色

1 个答案: