2011-11-20 77 views
6

该页面有如下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的所有样式。除了获取所有计算样式的列表并将其设置为空之外,是否有某种方法可以执行此操作?

回答

2

是否有某种方式来做到这一点

有没有办法阻止申请,如果选择匹配的元素规则。

您可以

  • 设定你想有一个特定的值(用适当的具体选择和!important
  • 移动元素到不同的文件(这样可装载每一个属性,例如,一个iframe)。
  • 删除的规则(并因此导致它不适用于任何元件
  • 变化对规则集的选择器(因此它不匹配元素的任何更多,Y OU必须要小心,以确保它仍然选择你所关心的不是让所有的计算样式列表和设置他们的空元素)

其他?

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

+0

我认为你是对的。我可以在循环内重置所有计算的样式,但它不太合乎逻辑。 –

0

正如你可以在这个链接看到:​​,所有的选择器具有特异性值。所以,如果你写这样的css规则:#txt1 {},你可以重置所有不必要的值。

+0

谢谢,但没有工作.. –

+1

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