如何重置所有通过JavaScript修改的样式？

嘿，这个问题问得特别接地气——开发中经常遇到JS动态改完样式后，需要一键恢复到初始状态的场景。我整理了几个靠谱的方案，你可以根据自己的业务场景来选：

1. 直接清空内联样式（最直接的方法） #

大部分JavaScript修改样式的操作，最终都会落到元素的内联style属性上。这种情况下，直接清空这个属性就能让元素恢复到CSS样式表定义的初始状态：

// 重置单个元素
const targetEl = document.getElementById('your-element-id');
targetEl.style.cssText = ''; // 清空所有内联样式
// 或者用 removeAttribute 效果一样
targetEl.removeAttribute('style');

// 批量重置多个元素（比如某一类元素）
document.querySelectorAll('.dynamic-style-el').forEach(el => {
  el.style.cssText = '';
});

注意：这个方法只会清除JS添加的内联样式，外部CSS或者<style>标签里的样式会自动生效，完美回到初始状态。

2. 用CSS类管理动态样式（最推荐的工程化方案） #

如果是项目开发，我强烈建议不要直接用JS修改style属性，而是通过添加/移除CSS类来控制样式变化。这样重置起来只需要移除对应的类就好，代码更易维护：

/* 定义默认样式 */
.card {
  border: 1px solid #eee;
  padding: 16px;
}

/* 定义JS触发的修改样式类 */
.card.highlighted {
  border-color: #2196F3;
  background: #f5f9ff;
}

// 修改样式时添加类
document.querySelector('.card').classList.add('highlighted');

// 重置样式时移除类
document.querySelector('.card').classList.remove('highlighted');
// 如果有多个类需要移除，也可以用 replace 或者 toggle

这种方式的好处是样式和逻辑分离，后续修改样式只需要改CSS，不用动JS代码。

3. 保存初始样式快照（适合复杂内联修改场景） #

如果因为某些原因必须用JS直接修改内联样式，那可以在页面加载完成后，先保存元素的初始样式状态，重置时再恢复：

// 页面加载完成后，保存需要重置的元素的初始样式
const resetElements = document.querySelectorAll('.need-reset');
const initialStyleMap = new Map();

resetElements.forEach(el => {
  // 保存当前的内联样式（如果初始就有内联样式也会被保留）
  initialStyleMap.set(el, el.style.cssText);
});

// 定义重置函数
function resetAllStyles() {
  resetElements.forEach(el => {
    el.style.cssText = initialStyleMap.get(el);
  });
}

这个方法适合那些初始状态就带有内联样式，或者JS修改了多个零散样式的场景。

4. 重新渲染元素（极端场景下的兜底方案） #

如果上面的方法都不生效（比如JS修改了CSS变量、伪元素样式，或者样式被深层修改），可以通过重新渲染元素来恢复初始状态：

const targetEl = document.getElementById('hard-reset-el');
// 克隆一个初始状态的元素（包含所有初始样式）
const elClone = targetEl.cloneNode(true);
// 用克隆元素替换原元素
targetEl.parentNode.replaceChild(elClone, targetEl);

注意：这个方法会丢失原元素上绑定的事件监听，除非你用了事件委托。所以不到万不得已不建议用。

如果你的场景还有特殊情况（比如修改了全局CSS变量），可以再补充细节，上面的方案应该能覆盖绝大多数常见需求啦～

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