javascript js移除style js加入css - 如何刪除使用.css()函數添加的樣式?




8 Answers

將屬性更改為空字符串似乎可以完成這項工作。

$.css("background-color", "");

js更換css javascript控制css

我正在用jQuery更改CSS,並且希望根據輸入值刪除我要添加的樣式:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

我怎樣才能做到這一點? 請注意,只要使用顏色選擇器選擇顏色(即,當鼠標移動到色輪上時),上面的行就會運行。

第二個注意:我不能用css("background-color", "none")做到這一點,因為它會從css文件中刪除默認樣式。 我只想刪除jQuery添加的background-color內聯樣式。




有幾種使用jQuery去除CSS屬性的方法:

1.將CSS屬性設置為其默認(初始)值

.css("background-color", "transparent")

查看MDN的CSS屬性初始值 。 這裡默認值是transparent 。 您還可以使用多個CSS屬性的繼承來從其父項繼承該屬性。 在CSS3 / CSS4中,您也可以使用initialrevertunset但這些關鍵字可能只有有限的瀏覽器支持。

2.刪除CSS屬性

一個空字符串刪除CSS屬性,即

.css("background-color","")

但要注意,正如jQuery .css()文檔中所指定的那樣,這將刪除該屬性,但它與IE8對於某些CSS速記屬性(包括背景)具有兼容性問題。

將style屬性的值設置為一個空字符串 - 例如$('#mydiv')。css('color','') - 如果元素已經直接應用,屬性,通過jQuery的.css()方法,或通過直接DOM操作style屬性。 但是,它不會刪除樣式表或元素中已應用CSS規則的樣式。 警告: 一個值得注意的例外是,對於IE 8及以下版本,刪除諸如邊框或背景之類的簡寫屬性將完全從元素中刪除該樣式,而不管樣式表或元素中設置了什麼

3.刪除元素的整體風格

.removeAttr("style")



這些jQuery函數中的任何一個都可以工作:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 



感覺如何:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}



正在使用:

$('.tag-class').removeAttr('style');

要么

$('#tag-id').removeAttr('style');



使用我的插件:

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

對於你的情況,使用它如下:

$(<mySelector>).removeCss();

要么

$(<mySelector>).removeCss(false);

如果你想刪除其類中定義的CSS:

$(<mySelector>).removeCss(true);



這比其他一些解決方案更複雜,但可以在場景中提供更多的靈活性:

1)做一個類定義來隔離(封裝)你想要選擇應用/刪除的樣式。 它可以是空的(對於這種情況,可能應該是):

.myColor {}

2)使用此代碼,基於http://jsfiddle.net/kdp5V/167/這個答案通過gilly3 :

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

用法示例: http://jsfiddle.net/qvkwhtow/ : http://jsfiddle.net/qvkwhtow/

注意事項:

  • 沒有廣泛測試。
  • 不能在新價值中包含重要或其他指令。 通過這種操作,任何這樣的現有指令都將丟失。
  • 只有在發現styleSelector時才會發生更改。 不添加或刪除整個樣式,但可以通過更精細的操作來完成。
  • 任何無效/不可用的值將被忽略或拋出錯誤。
  • 在Chrome(至少)中,非本地(如跨站點)CSS規則不會通過document.styleSheets對象公開,因此這不適用於它們。 必須添加一個本地覆蓋並對其進行操作,同時牢記此代碼的“首次發現”行為。
  • document.styleSheets對於一般的操作並不特別友好,不要指望它適用於積極的使用。

以這種方式分離樣式是CSS的全部內容,即使操縱它也不是。 操縱CSS規則不是jQuery的全部內容,jQuery處理DOM元素,並使用CSS選擇器來完成它。




嘗試這個

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');



Related