本文讲解如何在 JavaScript 中精准还原 HTML 元素的原始内联样式（即 style="" 中声明的值），而非回退到 CSS 类或浏览器默认样式，通过 getComputedStyle 获取初始内联值并手动重置实现可靠“撤销”。
本文讲解如何在 javascript 中精准还原 html 元素的原始内联样式（即 `style=""` 中声明的值），而非回退到 css 类或浏览器默认样式，通过 `getcomputedstyle` 获取初始内联值并手动重置实现可靠“撤销”。
在 Web 开发中，我们常通过 element.style.property = value 动态修改元素的内联样式。但当需要“撤销”这些修改时，直接赋值 element.style.property = "" 或 null 并不能恢复原始 style="" 中的值——它会触发级联计算，最终回退到 CSS 类、继承值或浏览器默认值，丢失原始内联声明。
关键在于：element.style 仅反映显式设置的内联样式（即 HTML 中 style="color: red; font-size: 14px" 的内容），而 getComputedStyle(element) 返回的是最终生效的计算样式（含类、继承、默认值等）。因此，若想真正“还原到 style="" 的初始状态”，必须在修改前主动捕获原始内联值。
✅ 正确做法是：在首次操作前，解析 element.getAttribute('style') 或使用 CSSStyleDeclaration 的 getPropertyValue() 配合 element.style 的原始快照：
const element = document.querySelector('#myElement');
// ✅ 方案一：直接读取原始 style 属性字符串（推荐用于简单场景）
const originalStyle = element.getAttribute('style') || '';
// 修改样式
element.style.color = 'green';
element.style.fontSize = '18px';
// 还原：清空 style 属性，再重新设回原始值（保留所有原始内联声明）
element.setAttribute('style', originalStyle);
// ✅ 方案二：按属性粒度还原（适合只还原部分样式） const originalColor = element.style.color || ''; // 注意：此处读取的是初始内联 color 值（若未设则为空字符串） const originalFontSize = element.style.fontSize || ''; // 后续修改... element.style.color = 'blue'; element.style.backgroundColor = 'yellow'; // 还原指定属性（不影响其他已修改或新增的 style 属性） if (originalColor) element.style.color = originalColor; if (originalFontSize) element.style.fontSize = originalFontSize;
⚠️ 注意事项：
- window.getComputedStyle(element).color 不是原始内联值，而是最终计算结果（可能来自 class、继承或 UA 默认），因此不可用于还原内联样式；
- element.style.color = "" 会移除该属性的内联声明，触发样式重新级联，行为等同于删除 style 中该项，并非“还原”；
- 若原始 style 属性为空（style=""），则所有 element.style.* 初始值均为 ""，此时还原即清空对应属性即可；
- 对于批量样式管理，建议封装为工具函数，或使用 CSS Custom Properties + setAttribute('style', ...) 实现更可控的状态切换。
总结：还原内联样式本质是状态快照与回写。最健壮的方式是在任何动态修改前，用 getAttribute('style') 保存原始字符串，并在需要时整行还原——这确保了语义一致性，完全规避计算样式干扰，真正实现“回到 style="" 的那一刻”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
