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

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

removeAttr( 'style' );

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

Answer 3

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

<强> 1。将CSS属性设置为其默认（初始）值

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

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

<强> 2。删除CSS属性

空字符串会删除CSS属性，即

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

但请注意，正如jQuery .css() documentation中所述，这会删除该属性，但它与IE8在某些CSS速记属性方面存在兼容性问题，包括背景。

将样式属性的值设置为空字符串 - 例如 $（'＃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

如下：

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 8

试试这个：

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

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

由于

Answer 9

只需使用：

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

或

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

Answer 10

如果您使用CSS样式，则可以使用：

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

然后替换为：

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

如果您不使用CSS样式并且HTML元素中包含属性，则可以使用：

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

Answer 11

使用我的插件：

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

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

$(<mySelector>).removeCss();

或

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

如果你想删除其类中定义的CSS：

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

Answer 12

2018

有本机API

element.style.removeProperty(propery)

Answer 13

您使用

删除样式

removeAttr( 'style' );

Answer 14

这个也有效!!

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

Answer 15

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

的可能性

（如果该课程已存在，请删除该课程，如果该课程不存在，请将其添加。）

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

Answer 16

您可以使用：

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

Answer 17

尝试

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>

Answer 18

试试这个

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

Answer 19

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

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

.myColor {}

2）根据http://jsfiddle.net/kdp5V/167/ this answer gilly3的http://jsfiddle.net/qvkwhtow/使用此代码：

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://localhost/htaccess_test/put_some_value_here

警告：

未经过广泛测试。
新值中不能包含！important 或其他指令。任何这样的现有指令都将通过这种操纵而丢失。
只有更改首先发现了styleSelector的出现。不添加或删除整个样式，但这可以通过更复杂的东西来完成。
任何无效/不可用的值都将被忽略或抛出错误。
在Chrome（至少）中，非本地（如跨站点）CSS规则不会通过document.styleSheets对象公开，因此这对它们不起作用。必须添加本地覆盖并操纵它，记住此代码的“首次发现”行为。
document.styleSheets一般对操作不是特别友好，不要指望这种方法可以用于侵略性使用。

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

Answer 20

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

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

如何删除添加了.css（）函数的样式？

21 个答案: