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

How to remove all inherited and computed styles from an element?

本文关键字：继承 计算 样式 删除 元素      更新时间：2023-09-26

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

有什么办法可以做到吗

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

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

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

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

从这个链接http://www.w3.org/TR/CSS2/cascade.html#specificity可以看到，所有选择器都有特定值。所以，如果你写这样的css规则:#txt1 {}，你可以重置所有不必要的值。

相关文章：