JS点击按钮修改div样式后立即恢复原有样式如何解决

DevOps 小满

2026-9-24

问题原因

你使用了<a>标签作为触发按钮，且href属性为空值，点击空href的<a>标签会触发页面重载行为：你写的JS逻辑先执行修改了样式，随后页面立刻刷新，所有DOM状态恢复到初始值，就会出现样式修改后立刻回退的现象。

解决方法

可以任选以下任意一种方案修复：

方案1：阻止<a>标签的默认跳转行为
在点击事件的逻辑中添加e.preventDefault()即可，修改后的事件监听代码示例：

document.body.addEventListener("click", (e) => {
  if (e.target.classList.contains("js-multi-btn")) {
    e.preventDefault(); // 阻止默认跳转
    gameBoard.setGameMode('multi');
    displayController.revealBoard();
  }
});

document.body.addEventListener("click", (e) => {
  if (e.target.classList.contains("js-single-btn")) {
    e.preventDefault(); // 阻止默认跳转
    gameBoard.setGameMode('single');
    displayController.revealBoard();
  }
});

方案2：修改<a>标签的href属性为javascript:void(0)
更改HTML中的按钮代码，避免点击触发跳转：

<a href="javascript:void(0)" class="js-multi-btn multi-btn">Multi Player Mode</a>
<a href="javascript:void(0)" class="js-single-btn single-btn">Single Player Mode</a>

方案3：替换<a>标签为原生<button>标签
纯触发交互的按钮更适合用<button>标签，天生不会触发跳转行为，语义也更准确：
```
<button class="js-multi-btn multi-btn">Multi Player Mode</button>
<button class="js-single-btn single-btn">Single Player Mode</button>
```