按钮点击开关切换效果实现方法 - JavaScript 代码示例

要实现按钮点击开关切换效果，可以通过改变按钮的样式或状态来实现。以下是一种常见的实现方式：

1. 在HTML中，创建一个按钮元素，并给它一个唯一的ID，例如：

<button id="toggleButton">开关</button>

2. 在CSS中，定义按钮的两种状态的样式，例如：

#toggleButton {
  width: 100px;
  height: 50px;
  background-color: green;
  color: white;
}

#toggleButton.active {
  background-color: red;
}

3. 在JavaScript中，为按钮添加点击事件的监听器，并在监听器中切换按钮的状态，例如：

var toggleButton = document.getElementById('toggleButton');

toggleButton.addEventListener('click', function() {
  toggleButton.classList.toggle('active');
});

这样，当按钮被点击时，它的样式会从默认状态切换到.active样式，再次点击时又会切换回默认样式，实现了按钮点击开关切换效果。