Javascript 如何删除使用 .css() 函数添加的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4036857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I remove a style added with .css() function?
提问by Alex
I'm changing CSSwith jQueryand I wish to remove the styling I'm adding based on the input value:
我正在使用jQuery更改CSS，并且我希望根据输入值删除我添加的样式：
if(color != '000000') $("body").css("background-color", color); else // remove style ?
How can I do this?
Note that the line above runs whenever a color is selected using a color picker (ie. when the mouse moves over a color wheel).
我怎样才能做到这一点？
请注意，每当使用颜色选择器选择颜色时（即当鼠标移动到色轮上时），上面的行就会运行。
2nd note: I can't do this with css("background-color", "none")because it will remove the default styling from the CSSfiles.
I just want to remove the background-colorinline style added by jQuery.
第二个注意事项：我不能这样做，css("background-color", "none")因为它会从CSS文件中删除默认样式。
我只想删除jQuerybackground-color添加的内联样式。
回答by
Changing the property to an empty string appears to do the job:
将属性更改为空字符串似乎可以完成这项工作：
$.css("background-color", "");
回答by ThinkingStiff
The accepted answerworks but leaves an empty styleattribute on the DOM in my tests. No big deal, but this removes it all:
接受的答案有效，但style在我的测试中在 DOM 上留下了一个空属性。没什么大不了的，但这消除了一切：
removeAttr( 'style' );
This assumes you want to remove all dynamic styling and return back to the stylesheet styling.
这假设您要删除所有动态样式并返回到样式表样式。
回答by KrisWebDev
There are several ways to remove a CSS property using jQuery:
有几种方法可以使用 jQuery 删除 CSS 属性：
1. Setting the CSS property to its default (initial) value
1. 将 CSS 属性设置为其默认（初始）值
.css("background-color", "transparent")
See the initial value for the CSS property at MDN.
Here the default value is transparent. You can also use inheritfor several CSS properties to inherite the attribute from its parent. In CSS3/CSS4, you may also use initial, revertor unsetbut these keywords may have limited browser support.
在 MDN 上查看CSS 属性的初始值。这里的默认值为transparent。您还可以使用inherit多个 CSS 属性来从其父级继承该属性。在 CSS3/CSS4 中，您也可以使用initial,revert或者unset这些关键字的浏览器支持可能有限。
2. Removing the CSS property
2. 移除 CSS 属性
An empty string removes the CSS property, i.e.
空字符串删除 CSS 属性，即
.css("background-color","")
But beware, as specified in jQuery .css() documentation, this removes the property but it has compatibilty issues with IE8 for certain CSS shorthand properties, including background.
但是请注意，正如jQuery .css() 文档中所指定的那样，这会删除该属性，但对于某些 CSS 速记属性（包括background ），它与 IE8 存在兼容性问题。
Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or element. Warning: one notable exception is that, for IE 8 and below, removing a shorthand property such as border or background will remove that style entirely from the element, regardless of what is set in a stylesheet or element.
将样式属性的值设置为空字符串 - 例如 $('#mydiv').css('color', '') - 如果该属性已被直接应用，则从元素中删除该属性，无论是在 HTML 样式中属性，通过 jQuery 的 .css() 方法，或通过样式属性的直接 DOM 操作。但是，它不会删除已在样式表或元素中应用 CSS 规则的样式。警告：一个值得注意的例外是，对于 IE 8 及以下版本，删除诸如边框或背景之类的速记属性将从元素中完全删除该样式，而不管在样式表或元素中设置了什么。
3. Removing the whole style of the element
3. 移除元素的整体样式
.removeAttr("style")
回答by Marwan
I got the way to remove a style attribute with pure JavaScript just to let you know the way of pure JavaScript
我得到了用纯 JavaScript 删除样式属性的方法，只是为了让您了解纯 JavaScript 的方式
var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
bodyStyle.removeAttribute('background-color');
else
bodyStyle.removeProperty('background-color');
回答by SURJEET SINGH Bisht
This will remove complete tag :
这将删除完整的标签：
$("body").removeAttr("style");
回答by Mahesh Gaikwad
either of these jQuery functions should work:
这些 jQuery 函数中的任何一个都应该可以工作：
$("#element").removeAttr("style");
$("#element").removeAttr("background-color")
回答by Alberto Cerqueira
Just using:
只需使用：
$('.tag-class').removeAttr('style');
or
或者
$('#tag-id').removeAttr('style');
回答by uihelp
Try this:
尝试这个：
$('#divID').css({"background":"none"});// remove existing
$('#divID').css({"background":"#bada55"});// add new color here.
Thanks
谢谢
回答by nclu
How about something like:
怎么样：
var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
$(element).removeAttr('css');
} else {
$(element).attr('css', myCss);
}
回答by Abdennour TOUMI
Use my Plugin :
使用我的插件：
$.fn.removeCss=function(all){
if(all===true){
$(this).removeAttr('class');
}
return $(this).removeAttr('style')
}
For your case ,Use it as following :
对于您的情况，请按如下方式使用它：
$(<mySelector>).removeCss();
or
或者
$(<mySelector>).removeCss(false);
if you want to remove also CSS defined in its classes :
如果您还想删除其类中定义的 CSS：
$(<mySelector>).removeCss(true);
