如何刪除使用 .css() 函數添加的樣式？

Question

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

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

我該怎么做？
請注意，每當使用顏色選擇器選擇顏色時（即當鼠標移動到色輪上時），上面的行就會運行。

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

Answer 1

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

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

Answer 2

接受的答案有效，但在我的測試中在 DOM 上留下了一個空的style屬性。 沒什么大不了的，但這消除了一切：

removeAttr( 'style' );

這假設您要刪除所有動態樣式並返回到樣式表樣式。

Answer 3

有幾種方法可以使用 jQuery 刪除 CSS 屬性：

1. 將 CSS 屬性設置為其默認（初始）值

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

在 MDN 上查看CSS 屬性的初始值。 這里的默認值是transparent 。 您還可以對多個 CSS 屬性使用inherit來從其父級繼承該屬性。 在 CSS3/CSS4 中，您也可以使用initial 、 revert或unset但這些關鍵字可能受瀏覽器支持有限。

2. 移除 CSS 屬性

空字符串刪除 CSS 屬性，即

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

但請注意，正如jQuery .css() 文檔中所指定的那樣，這會刪除該屬性，但對於某些 CSS 速記屬性（包括background ） ，它與 IE8 存在兼容性問題。

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

3. 移除元素的整體樣式

.removeAttr("style")

Answer 4

我得到了用純 JavaScript 刪除樣式屬性的方法，只是為了讓您了解純 JavaScript 的方式

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

Answer 5

這將刪除完整的標簽：

  $("body").removeAttr("style");

Answer 6

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

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

Answer 7

只需使用：

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

或

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

Answer 8

怎么樣：

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

Answer 9

如果使用 CSS 樣式，則可以使用：

$("#element").css("background-color","none"); 

然后替換為：

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

如果您不使用 CSS 樣式並且您在 HTML 元素中有屬性，則可以使用：

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

Answer 10

使用我的插件：

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

對於您的情況，請按如下方式使用它：

$(<mySelector>).removeCss();

或

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

如果您還想刪除其類中定義的 CSS：

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

Answer 11

試試這個：

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

謝謝

Answer 12

2018年

有原生 API

element.style.removeProperty(propery)

Answer 13

這個也能用！！

$elem.attr('style','');

Answer 14

為什么不制作您希望刪除的 CSS 類的樣式？ 現在您可以使用： .removeClass() 。 這也開辟了使用的可能性： .toggleClass()

（如果存在則刪除該類，如果不存在則添加它。）

在處理布局問題時，添加/刪除一個類也不會那么混亂（而不是試圖找出特定樣式消失的原因。）

Answer 15

let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

Answer 16

在 Web 開發中，簡單是廉價的。 我建議在刪除特定樣式時使用空字符串

$(element).style.attr = '  ';

Answer 17

這比其他一些解決方案更復雜，但可能在場景中提供更大的靈活性：

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/

注意事項：

• 未經廣泛測試。
• 不能在新值中包含!important或其他指令。 任何此類現有指令都將通過此操作丟失。
• 僅更改第一次發現 styleSelector 的出現。 不添加或刪除整個樣式，但這可以通過更復雜的方式來完成。
• 任何無效/不可用的值都將被忽略或拋出錯誤。
• 在 Chrome 中（至少），非本地（如跨站點）CSS 規則不會通過 document.styleSheets 對象公開，因此這對它們不起作用。 必須添加一個本地覆蓋並對其進行操作，牢記此代碼的“首次發現”行為。
• document.styleSheets 通常對操作不是特別友好，不要指望它可以用於激進的使用。

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

Answer 18

試試這個

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

Answer 19

你刪除樣式使用

removeAttr( 'style' );

Answer 20

您可以使用：

 $("#eslimi").removeAttr("style").hide();

Answer 21

試試

document.body.style=''

 $("body").css("background-color", 'red'); function clean() { document.body.style='' }

 body { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="clean()">Remove style</button>