如何在JavaScript中实现按钮点击切换黑白颜色功能？

你可以利用classList.toggle()方法来实现点击切换类的效果——这个方法会自动检查元素是否包含指定类：如果有就移除，没有就添加，完美适配你需要的“点击变黑、再点击变白”的需求。

修改后的代码如下：

let pushButtons = document.querySelectorAll('.card__itemsize');
pushButtons.forEach(pushButton => {  
  pushButton.addEventListener('click', (e) => { 
    if (e.target === pushButton) { 
      pushButton.classList.toggle('clickSizeBlack');
    }
  });
});

代码说明： #

• 替换原代码中的classList.add()为classList.toggle()，无需手动编写判断逻辑，方法内部会自动完成类的添加/移除切换。
• 保留你原有的e.target === pushButton判断是合理的，如果按钮内部包含子元素（比如图标、<span>标签），这个判断可以确保只有点击按钮本身时才触发切换；如果按钮是纯文本元素，这个判断也可以省略，不影响功能。

另外要确保你的CSS中.clickSizeBlack类定义了黑色样式（比如背景色或文字色），而按钮默认状态是白色样式，这样切换类就能实现颜色的来回变化。

内容的提问来源于stack exchange，提问作者Kira Dresst