如何在 javascript 中将样式属性重置为其 CSS 默认值？答案

【问题标题】：How to reset the style properties to their CSS defaults in javascript?如何在 javascript 中将样式属性重置为其 CSS 默认值？
【发布时间】：2011-03-31 04:21:03
【问题描述】：

在一个 php 生成的页面上有几个这样的元素：

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

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

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

【问题讨论】：

标签： javascript html css dynamic-html

【解决方案1】：

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

 obj.style.color = "";

【讨论】：

设置为 null 在 ff 和 chrome 中有效，但在 IE 中无效。在 IE 中（这适用于 FF 和 chrome）你应该做 obj.style.color="";

【解决方案2】：

如果回忆有用，obj.style.color="" 应该可以工作...不过我不知道它是否正确。

【讨论】：

我认为这只会重置通过 JavaScript 设置的样式。但是在这种情况下，原始样式是内联的。
它有效，而且它是正确的，尽管由于样式是在标记中添加的，您可能还想使用obj.removeAttribute('style') 以更好地衡量。
@casablanca 很好，它确实可以在 Firefox 中工作，无论元素上的样式设置在哪里。
你说得对，我刚刚测试过它，它可以工作。内联样式似乎进入了obj.style，因此您可以通过清空字符串来重置它们，但不能通过样式表中声明的方式来重置它们。
感谢您的快速回答。它适用于火狐。我希望它也适用于其他浏览器。我现在只有 Ubuntu，只有 Firefox。

【解决方案3】：

新方式：

el.attributeStyleMap.delete('color')

或清除所有内容：

el.attributeStyleMap.clear()

虽然不是所有的浏览器都支持这个。有关更多详细信息和浏览器兼容性，请参阅 MDN 上的 StylePropertyMap。

另请参阅 CSS Typed Object Model 和 Working with the new CSS Typed Object Model。

【讨论】：