如何删除使用 .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>