2013-12-22 120 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 - 非常真實。我花了很長時間打字,並沒有看到你的答案。 :) –