如何删除使用 .css() 函数添加的样式？答案

【问题标题】：How can I remove a style added with .css() function?如何删除使用 .css() 函数添加的样式？
【发布时间】：2011-05-01 12:19:39
【问题描述】：

我正在用 jQuery 更改 CSS，我希望根据输入值删除我添加的样式：

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

我该怎么做？
请注意，只要使用颜色选择器选择颜色（即当鼠标移到色轮上时），上面的行就会运行。

第二个注意事项：我不能对 css("background-color", "none") 执行此操作，因为它会从 CSS 文件中删除默认样式。
我只想删除 jQuery 添加的background-color 内联样式。

【问题讨论】：

How do I unset an element's CSS attribute using jQuery?的可能重复
最好根据您的功能尝试 addClass / removeClass。这不会影响其他样式。
在 jquery 中删除样式的两种方法与演示 codepedia.info/jquery-remove-inline-style

标签： javascript jquery css

【解决方案1】：

试试

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>

【讨论】：

【解决方案2】：

你可以使用：

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

【讨论】：

【解决方案3】：

您使用

删除样式

removeAttr( 'style' );

【讨论】：

【解决方案4】：

将属性更改为空字符串似乎可以完成这项工作：

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

【讨论】：

我必须支持@baacke。我们的客户仍然有 IE6(!!) 的官方最低要求。问题是，他们的客户遍布世界各地，包括欠发达国家。 “客户的客户”可能正在使用非常旧的计算机与我们的客户做生意。所以旧浏览器必须至少得到最低限度的支持，否则它们可能会失去业务......
你们无法设定为客户开发的任何解决方案的要求。如果该客户想要或需要对旧版浏览器的支持，那么您的工作就是提供它，期间。你们谈论“谁在乎”给真正的工程师一个坏名声。

【解决方案5】：

2018

有原生 API

element.style.removeProperty(propery)

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

为什么不制作您希望删除 CSS 类的样式？现在您可以使用：.removeClass()。这也开辟了使用的可能性：.toggleClass()

（如果存在则删除该类，如果不存在则添加它。）

在处理布局问题时，添加/删除类也不太容易更改/排除故障（而不是试图找出特定样式消失的原因。）

【讨论】：

【解决方案8】：

这将删除完整的标签：

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

【讨论】：

【解决方案9】：

只是使用：

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

或

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

【讨论】：

【解决方案10】：

我弄了个纯JavaScript去掉样式属性的方法，就是为了让大家知道纯JavaScript的方法

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

【讨论】：

因为 jquery 并不是万能的，因为她或者我应该说我们每个开发人员都应该知道兼容性意味着什么以及如何使用 JavaScript 这样的核心语言来做这样的事情，也许这是我的理论我已经根据我对核心 JavaScript 的知识创建了我自己的框架我拒绝使用其他东西我有我自己的概念和我的思维方式:) 顺便感谢你的 (-) 我只需要增值： ) 顺便说一句，这家伙不是她叫亚历克斯的人

【解决方案11】：

试试这个

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

【讨论】：

【解决方案12】：

The accepted answer 有效，但在我的测试中在 DOM 上留下了一个空的 style 属性。没什么大不了的，但这一切都消除了：

removeAttr( 'style' );

这假设您要删除所有动态样式并返回到样式表样式。

【讨论】：

【解决方案13】：

有几种方法可以使用 jQuery 删除 CSS 属性：

1.将 CSS 属性设置为其默认（初始）值

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

请参阅initial value for the CSS property at MDN。这里的默认值为transparent。您还可以对多个 CSS 属性使用 inherit 以从其父级继承属性。在 CSS3/CSS4 中，您还可以使用 initial、revert 或 unset，但这些关键字可能对浏览器的支持有限。

2。删除 CSS 属性

空字符串删除 CSS 属性，即

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

但请注意，正如 jQuery .css() documentation 中所指定的，这会删除该属性，但对于某些 CSS 速记属性（包括 background）存在与 IE8 的兼容性问题。

将样式属性的值设置为空字符串——例如 $('#mydiv').css('color', '') - 从元素中删除该属性如果已经直接应用，是否在HTML样式中属性，通过 jQuery 的 .css() 方法，或者通过直接 DOM 样式属性的操作。但是，它不会删除已在样式表中应用 CSS 规则的样式或元素。警告：一个值得注意的例外是，对于 IE 8 及更低版本，删除诸如边框或背景之类的速记属性将无论设置什么，从元素中完全删除该样式在样式表或元素中。

3.移除元素的整个样式

.removeAttr("style")

【讨论】：

【解决方案14】：

简单在网络开发中很便宜。我建议在删除特定样式时使用空字符串

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

【讨论】：

【解决方案15】：

这比其他一些解决方案更复杂，但可能会在场景中提供更大的灵活性：

1) 进行类定义以隔离（封装）您要选择性地应用/删除的样式。它可以是空的（对于这种情况，可能应该是）：

.myColor {}

2) 使用此代码，基于 http://jsfiddle.net/kdp5V/167/ from this answer by 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 或其他指令。任何此类现有指令都将通过此操作丢失。
仅更改第一次找到的样式选择器。不会添加或删除整个样式，但这可以通过更复杂的方式来完成。
任何无效/不可用的值都将被忽略或抛出错误。
在 Chrome 中（至少），非本地（如跨站点）CSS 规则不会通过 document.styleSheets 对象公开，因此这对它们不起作用。必须添加本地覆盖并对其进行操作，同时牢记此代码的“首次发现”行为。
document.styleSheets 通常对操作不是特别友好，不要指望这对激进的使用有效。

以这种方式隔离样式是 CSS 的全部意义所在，即使不是操纵它。操作 CSS 规则并不是 jQuery 的全部内容，jQuery 操作 DOM 元素，并使用 CSS 选择器来完成。

【讨论】：

【解决方案16】：

这个也可以！！

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

【讨论】：

【解决方案17】：

试试这个：

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

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

谢谢

【讨论】：

【解决方案18】：

这些 jQuery 函数中的任何一个都应该可以工作：

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

【讨论】：

只删除一个css属性：var cssObject = $('selector').prop('style'); cssObject.removeProperty('background-color');

【解决方案19】：

使用我的插件：

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

对于您的情况，请按以下方式使用：

$(<mySelector>).removeCss();

或

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

如果您还想删除在其类中定义的 CSS：

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

【讨论】：

【解决方案20】：

如果你使用 CSS 样式，你可以使用：

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

然后替换为：

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

如果你不使用 CSS 样式并且你在 HTML 元素中有属性，你可以使用：

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

【讨论】：

【解决方案21】：

比如：

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

【讨论】：