如何在Javascript中将样式属性重置为它们的CSS默认值？

Question

在一个由PHP生成的页面上，有多个这样的元素：

<td class="defaultTDStyle" style="color:userDefinedCustomColor" id="myTDId"></td>

默认有一个样式，我应用了几个额外的样式覆盖了CSS中定义的样式。

有没有一种方法可以从JavaScript中删除这些添加的样式？似乎obj.style.color="default"和obj.style.color="auto"不起作用。如何在JavaScript中将颜色重置为CSS默认值？

- Calmarius

Answer 1

如果我的回忆没错的话，obj.style.color=""应该可以...但我不确定它是否是正确的方法。

- Richard JP Le Guen

---

我认为只有通过JavaScript设置的样式才会被重置。但在这种情况下，原始样式是内联的。 - casablanca

它是有效的且正确的，尽管由于样式添加在标记中，您可能需要使用 obj.removeAttribute('style') 确保完整。 - MooGoo

@MooGoo - 我认为删除整个样式属性可能会很激进。如果有其他属性他们不想重置/删除怎么办？ - Richard JP Le Guen

我理解“恢复默认样式”是指元素的样式不包含任何内联属性。如果你在谈论单个样式规则，那么你不想删除整个样式属性。 - MooGoo

也适用于Opera和Chrome。 - Calmarius

Answer 2

将样式属性值设置为空字符串：

 obj.style.color = "";

- Pointy

---

在 Firefox 和 Chrome 中，将值设置为 null 是可行的，但在 IE 中不行。在 IE 中（在 Firefox 和 Chrome 中同样适用），你应该这样做：obj.style.color = ""; - dan gibson

Answer 3

新的方式：

el.attributeStyleMap.delete('color')

或清除所有内容：

el.attributeStyleMap.clear()

尽管如此，不是所有的浏览器都支持这个功能。详细信息和浏览器兼容性请查看 MDN 上的 StylePropertyMap。由于 Firefox 目前不支持它，您不应在生产环境中使用它。

还可以参考 CSS Typed Object Model 和 Working with the new CSS Typed Object Model。

- trusktr

---

需要注意的是，属性字符串必须采用CSS格式而不是JavaScript样式对象格式。因此，应该使用delete('background-color')而不是delete('backgroundColor')。这有点不幸，因为如果你保留一些为JavaScript格式化的属性列表，以便可以使用.style[prop_string]=v，现在你还必须携带它们的CSS等效形式，否则你将无法调用attributeStyleMap。 - FlorianB

在Firefox中无法工作：https://caniuse.com/mdn-api_htmlelement_attributestylemap - Antoine

Answer 4

在重写属性之前，您可以保存属性样式，然后再次应用它。像这样：

// Get element styling
const element = document.getElementById('someId');
const style = element.getAttribute('style');
const classList = element.classList;
/** Code for overriding element styling goes here **/ 
// Retrieve original styling
const newClassList = element.classList;
for (let item of newClassList) 
    element.classList.remove(item);
for (let item of classList)
    element.classList.add(item);
element.setAttribute('style', style);

- Omar RB

Answer 5

如果你之前通过JS设置了样式，你可以这样做：

element.style.color = null;

这将重置样式声明。更多信息请点击这里：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

- Andrés Aguilar