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

Question

该页面具有以下 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 的所有样式。除了获取所有计算样式的列表并将它们设置为空之外，是否有某种方法可以做到这一点？

Answer 1

Is there a certain way to do this

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

你可以

• 设置您想要的每个属性都具有特定值(使用适当的特定选择器和 !important
• 将元素移动到不同的文档(然后可以加载，例如，iframe)。
• 删除规则(从而使其不适用于任何元素)
• 更改规则集上的选择器(因此它不再匹配元素，您必须小心确保它仍然选择您关心的元素)

other than getting the list of all computed styles and setting them empty?

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