如何实现按钮点击切换网站背景色？现有代码失效求解决

看起来你当前的代码没法实现需求，主要是因为用错了CSS伪类，而且缺少必要的JavaScript交互——仅靠CSS没法完成持久的背景色切换。我来帮你修正：

问题分析 #

• .myBtn:active 只有在按住按钮点击的瞬间生效，松开鼠标就会恢复原状，没法保持背景色变化
• :visited 伪类只适用于 <a> 链接标签，对按钮完全不起作用
• 你当前的CSS只是修改按钮自身的背景，并没有针对整个网站的背景色做设置

正确的实现方案 #

我们需要用JavaScript监听按钮点击事件，配合CSS类来切换页面背景色：

1. HTML 代码 #

保留你的按钮即可：

<button class="myBtn">Click here to change the background color</button>

2. CSS 代码 #

定义一个用来切换背景色的类，同时给按钮加一点基础样式提升体验：

/* 定义切换为白色背景的类 */
.bg-white {
  background-color: white !important; /* 如果原有背景色优先级高，用!important确保生效 */
}

/* 按钮基础样式（可选） */
.myBtn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #e0e0e0;
  cursor: pointer;
}

.myBtn:hover {
  background-color: #bdbdbd;
}

3. JavaScript 代码 #

添加点击事件监听，实现背景色的切换逻辑：

const toggleBtn = document.querySelector('.myBtn');
const pageBody = document.body;

toggleBtn.addEventListener('click', () => {
  // 切换bg-white类：有就移除，没有就添加（实现来回切换效果）
  pageBody.classList.toggle('bg-white');
  
  // 如果只需要一次性切换到白色（不需要切回原背景），可以替换成下面这行：
  // pageBody.classList.add('bg-white');
});

效果说明 #

• 点击按钮后，整个页面的背景会切换为白色，再次点击会切回原来的背景色（使用toggle的情况）
• 如果只需要单向切换到白色，把代码里的toggle换成add即可

这样就能实现你想要的功能啦！

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