Question

我试图在点击元素时更改元素的背景颜色。基本上，我希望能够在每次点击时来回切换这种颜色。

以下是我使用的代码：

        function activateButton1() {
            var x = document.getElementById('postButton1');

            if (x.className == 'postButton1') {
                x.className = 'postButton1on';
            } else {
                x.className = 'postButton1';
            }
        }

我使用了两种不同的背景颜色的CSS类，但它不起作用。任何人都可以提供任何见解吗？

Answer 1

可以使用toggle方法完成此操作：

function activateButton1() {
    this.classList.toggle("postButton1on");
}

你甚至可以在html中解决这个问题来简化：

<tr onclick="this.classList.toggle('postButton1on')">...</tr>

然后只要在.postButton1on css之后声明.postButton1 css，那么.postButton1on背景颜色将覆盖之前设置的内容。

Answer 2

使用jQuery，您可以通过

完成

$( "#postButton1" ).on('click', function(){
  $( this ).toggleClass( "postButton1on" );
};

Answer 3

可能无法正常工作，因为您可能会混合使用id和class，因为它们具有相同的名称，至少在您发布的JS中是这样。这里包含的所有内容都包含在HTML文档中，经过测试可以运行：

<!DOCTYPE html>
<html>
<head>
  <style>
    .off {
      background-color: white;
    }
    .on {
      background-color: red;
    }
  </style>
  <script>
    function change() {
      var x = document.getElementById('post');
      if (x.className.match('on')) {
        x.className = 'off';
      } else {
        x.className = 'on';
      }
    }
    function change2() {
      var x = document.getElementById('row');
      if (x.className.match('on')) {
        x.className = 'off';
      } else {
        x.className = 'on';
      }
    }
  </script>
</head>
<body>
  <button id="post" onclick="change()" class="on">hello</button>
  <table>
    <tr id="row" onclick="change2()" class="on">
      <td>hey</td>
      <td>hey</td>
    </tr>
  </table>
</body>
</html>

更改单击的背景颜色

3 个答案: