2013-12-22 352 views
1

我想弄清楚如何使用jquery删除css属性。问题是,这似乎只能在内联样式的情况下完成。例如,当我用这个办法:如何使用JQuery从样式表中删除CSS属性?

('.hero').css('background-image', '').css('background-color', ''); 

它什么都不做,但如果它在这些属性中使用的样式属性,比它的伟大工程设置。同样可以说:

('.hero').css('background-image', 'none').css('background-color', 'transparent'); 

谁能帮助我除去通过添加样式,而不是内联属性?

+0

你应该能够做同样的。只需覆盖当前值。 [小提琴](http://jsfiddle.net/8TJt7/) –

+3

你不能,你可以用jQuery直接覆盖它们。 – Deryck

回答

3

你可以这样做,但它非常复杂。实现这一点的唯一方法是将样式表加载到javascript中的字符串中,清除要删除的规则(使用String.replace()或类似方法),然后从页面中删除当前的css标签(使用$ .remove ()),然后添加一个新的css标签,其中包含您加载的文件/文本的grepped内容。

这是非常非常复杂的。我认为你需要重新思考你为什么要尝试这样做。或者,也许只需坚持使用jQuery将值设置回它们的默认值,可以找到on w3schools。或者,也可以在样式表中创建一个将值设置为其默认值的样式,并为该元素提供样式。 只是给我们更多的信息,我们可能会提出一个更好的解决问题的方法。

3

我想你可能会问错误的问题。

它看起来像你希望能够重新调整一个元素而不删除它的现有类。一个更简单的方法是将一个额外的类添加到您想要改变样式的项目中,然后在CSS定义中处理它。

例如:

('.hero').addClass("blank"); 

与CSS:

.hero.blank { background-color: transparent; } 

由于.hero.blank.hero更具体,这将是风格首先应用。

+0

这将工作。小的补充:如果在新定义的类中同时使用!important属性,那么可能需要使用!important属性。 – akhikhl

+0

以及你可能想删除Class()到原始类,以避免类之间的任何奇怪的冲突 – TGammage

0

它看起来像我,你正试图调整同一功能中的几个CSS属性。

如果你想清除背景图片,并使背景透明,那么你只需要改变它们两者。CSS功能

尝试

$('.hero').css("background-image:none; background-color:transparent"); 

或刚刚成立具有风格格式化过的“heroAlt”第2个CSS类,并使用jQuery来删除旧的类/添加新类

$('.hero').removeClass(function(){ 
    $(this).addClass("heroAlt"); 
}); 

希望帮助

0

首先,下面的工作,如果正确使用:

$('.hero').css('background-image', 'none').css('background-color', 'transparent'); 

参见:http://jsfiddle.net/Az7VZ/

这就是说,有几个缺陷需要注意。

  1. 您在包含.hero div的HTML文档加载之前运行JavaScript。这具有jQuery没有选择任何应用CSS的效果。

  2. 您的CSS使用“!important”修饰符。您将无法使用jQuery重载该样式。

  3. 此外,不要忘记脚本中的“$”或“jQuery”。

注意:这不会覆盖实际的.hero类。因此,如果您使用“英雄”类添加另一个元素,那么它将具有原始CSS样式。您需要再次运行jQuery脚本才能将新样式应用于新元素。

一个很好的替代方案是用所需的样式创建不同的类。然后删除/通过jQuery添加CSS类:

$('.hero').removeClass('hero').addClass('hero2'); 

参见:http://jsfiddle.net/Az7VZ/1/

+0

我基本上同意你,但作为一种风格的问题,我宁愿添加第二个修改类,而不删除第一个。现在,这是因为在我的脑海中,第一类可能代表一种事物(例如''menuItem''),第二种状态(如''selected''),在这种情况下可能会也可能不会。 –

+0

@S McCrohan - 非常真实。我花了很长时间打字,并没有看到你的答案。 :) –