如何从元素中删除所有继承和计算的样式？答案

【问题标题】：How to remove all inherited and computed styles from an element?如何从元素中删除所有继承和计算的样式？
【发布时间】：2012-01-02 04:02:57
【问题描述】：

该页面具有以下 CSS：

input[type=text]
{
    display: inline; padding: 7px; background-color: #f6f6f6; font-size: 12px; letter-spacing: 1px; border: 1px solid #aac7d1; 
    /* lots of other styles here... */
}

我有许多文本输入元素和以下内容：

<input type="text" id="txt1" />

我尝试通过 jQuery 对这个单独的文本框 (txt1) 应用不同的样式：

$('#txt1').removeClass().removeAttr('style').css({
    'background-color': '#ff0000',
    //lots of other styles here...
});

但是那些来自样式表的样式不能以这种方式从元素中删除。 css 规则 input[type=text] 不是自定义类，所以 removeClass() 在这里不起作用，如果我是对的。

我想做的是；完全删除曾经应用于元素txt1 的所有样式。除了获取所有计算样式的列表并将它们设置为空之外，还有其他方法可以做到这一点吗？

【问题讨论】：

标签： javascript jquery html css styles

【解决方案1】：

有没有办法做到这一点

如果选择器匹配，则无法停止对元素应用规则。

你可以

设置您希望具有特定值的每个属性（使用适当的特定选择器和!important
将元素移动到其他文档（然后可以使用 iframe 等加载）。
删除规则（从而使其不适用于任何元素）
更改规则集上的选择器（使其不再匹配元素，您必须小心确保它仍然选择您关心的元素）

除了获取所有计算样式的列表并将它们设置为空吗？

那是行不通的。大多数属性不接受空白值，因此该规则将无效并被忽略（从而导致之前的规则再次应用）。

【讨论】：

我认为你是对的。我可以在一个循环中重置所有计算的样式，但这不太合乎逻辑。

【解决方案2】：

正如您在此链接中看到的：http://www.w3.org/TR/CSS2/cascade.html#specificity，所有选择器都具有特异性值。所以，如果你写了这样的css规则：#txt1 {}，你可以重置所有不必要的值。

【讨论】：

我认为我们需要澄清这种情况。所以，如果你有这样的规则：input[type=text] { background-color: #f6f6f6; } 并且想为你的项目重载背景颜色，你应该使用规则#txt1 { background-color: #ff0000; }