点击表单提交按钮修改CSS属性后瞬间恢复初始值解决方案

样式修改逻辑本身无错误，样式瞬间恢复的核心原因是：绑定点击事件的控件是form表单内的type="submit"提交按钮，点击后会触发表单默认的提交刷新行为，页面重载后所有JS对DOM的临时修改都会被重置为初始状态，才会出现样式修改后马上复原的现象。

选择任意一种方式调整即可：

方案1：阻止提交按钮的默认行为 #

给点击事件加preventDefault()拦截默认的表单提交刷新逻辑，不需要改动原有CSS和HTML结构，仅需调整JS代码、给事件调用传入事件对象：

function Next(e) {
  e.preventDefault(); // 拦截默认表单提交刷新
  document.querySelector('#hideme').style.display = 'none';
  document.querySelector('#showme').style.display = 'block';
}

对应HTML的按钮调用部分修改为：

<input type="submit" value="Next" onclick="Next(event)">

方案2：更换按钮类型 #

如果这个按钮仅做页面交互、不需要触发表单提交，直接把按钮的type从submit改成button，就不会触发默认刷新行为，原有JS逻辑不需要改动：

<form>
  <input type="text" name="text">
  <input type="button" value="Next" onclick="Next()">
</form>
<div id="hideme">Hide Me</div>
<div id="showme">Show Me</div>

如果你需要保留表单提交能力，选方案1即可；如果不需要提交表单数据，选方案2写法更简洁。原有CSS初始样式配置不需要做任何调整。

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