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

小开

最佳答案

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

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

小开

公认的答案有效，但在我的测试中在DOM上留下了一个空的style属性。没什么大不了的，但这会删除所有内容：

removeAttr( 'style' );

这假定您希望删除所有动态样式并返回到样式表样式。

小开

我得到了用纯JavaScript删除style属性的方法，只是为了让你知道纯JavaScript的方式

var bodyStyle = document.body.style;if (bodyStyle.removeAttribute)bodyStyle.removeAttribute('background-color');elsebodyStyle.removeProperty('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);}

小开

有几种方法可以使用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速记属性（包括背景），它与IE8存在兼容性问题。

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

3.删除元素的整个样式

.removeAttr("style")

小开

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

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

然后替换为：

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

如果您不使用CSS样式并且您在超文本标记语言元素中具有属性，则可以使用：

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

小开

使用我的插件：

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

对于您的情况，使用它如下：

$(<mySelector>).removeCss();

或

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

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

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

小开

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

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

小开

试试这个：

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

谢了

小开

这个也工作！！！

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

小开

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

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

小开

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

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

.myColor {}

2）使用此代码，基于http://jsfiddle.net/kdp5V/167/ from这个答案 bygilly3：

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/

注意事项：

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

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

小开

试试这个

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

小开

只是使用：

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

或

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

小开

这将删除完整的标签：

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

小开

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

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

添加/删除类在处理布局问题时更改/故障排除也不那么令人困惑（而不是试图弄清楚特定样式消失的原因。）

小开

let el = document.querySelector(element)let styles = el.getAttribute('style')
el.setAttribute('style', styles.replace('width: 100%', ''))

小开

2018

有原生API

element.style.removeProperty(propery)

小开

您使用

removeAttr( 'style' );

小开

您可以使用：

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

小开

试试看

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>