如何将HTML元素样式恢复至其style=""参数的初始状态？

当然可行，核心思路是提前保存原始的inline样式字符串——因为当你通过element.style修改样式时，会直接覆盖或更新元素的inline style属性，浏览器不会自动保留原始值。具体操作如下：

步骤1：提前保存原始inline样式 #

在你第一次修改元素样式之前，把元素HTML中style=""里的原始内容存到变量里：

const targetElement = document.getElementById('your-element-id');
// 保存原始的inline style字符串，比如"color: #ff0000; font-size: 14px;"
const originalInlineStyle = targetElement.getAttribute('style');

步骤2：恢复至原始inline样式 #

当需要撤销修改、回到最初的style=""状态时，直接把保存的原始样式字符串重新设置回去：

// 完全恢复原始的inline style
targetElement.setAttribute('style', originalInlineStyle);

为什么你之前的方法没用？ #

你尝试的element.style.color = ""或null，本质是移除inline style中的color属性，此时浏览器会优先应用CSS类的样式，而不是恢复原始的inline color值——因为你没有提前保存原始值，浏览器不知道你最初写在style=""里的color是什么。

示例场景 #

假设你的HTML是：

<div id="demo" style="color: blue; padding: 10px;" class="text-red">测试文本</div>

其中.text-red的样式是color: red;。

1. 先保存原始样式：

const demo = document.getElementById('demo');
const originalStyle = demo.getAttribute('style'); // 得到"color: blue; padding: 10px;"

2. 修改样式：

demo.style.color = 'green'; // 此时inline style变成"color: green; padding: 10px;"

3. 恢复原始样式：

demo.setAttribute('style', originalStyle); // 回到"color: blue; padding: 10px;"，文本变回蓝色

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