[英]How can I remove a style added with .css() function?
I'm changing CSS with jQuery and 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 CSS files.第二个注意事项:我不能用
css("background-color", "none")
因为它会从CSS文件中删除默认样式。
I just want to remove the background-color
inline style added by jQuery .我只想删除jQuery添加的
background-color
内联样式。
将属性更改为空字符串似乎可以完成这项工作:
$.css("background-color", "");
The accepted answer works but leaves an empty style
attribute on the DOM in my tests.接受的答案有效,但在我的测试中在 DOM 上留下了一个空的
style
属性。 No big deal, but this removes it all:没什么大不了的,但这消除了一切:
removeAttr( 'style' );
This assumes you want to remove all dynamic styling and return back to the stylesheet styling.这假设您要删除所有动态样式并返回到样式表样式。
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 . 在 MDN 上查看CSS 属性的初始值。 Here the default value is
transparent
.这里的默认值是
transparent
。 You can also use inherit
for several CSS properties to inherite the attribute from its parent.您还可以对多个 CSS 属性使用
inherit
来从其父级继承该属性。 In CSS3/CSS4, you may also use initial
, revert
or unset
but these keywords may have limited browser support.在 CSS3/CSS4 中,您也可以使用
initial
、 revert
或unset
但这些关键字可能受浏览器支持有限。
2. Removing the CSS property 2. 移除 CSS 属性
An empty string removes the CSS property, ie空字符串删除 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 — eg $('#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.
将样式属性的值设置为空字符串 - 例如 $('#mydiv').css('color', '') - 如果该属性已被直接应用,则从元素中删除该属性,无论是在 HTML 样式中属性,通过 jQuery 的 .css() 方法,或通过样式属性的直接 DOM 操作。 It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or element.
但是,它不会删除已在样式表或元素中应用 CSS 规则的样式。 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 .
警告:一个值得注意的例外是,对于 IE 8 及以下版本,删除诸如边框或背景之类的速记属性将从元素中完全删除该样式,而不管在样式表或元素中设置了什么。
3. Removing the whole style of the element 3. 移除元素的整体样式
.removeAttr("style")
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');
这将删除完整的标签:
$("body").removeAttr("style");
either of these jQuery functions should work:这些 jQuery 函数中的任何一个都应该可以工作:
$("#element").removeAttr("style");
$("#element").removeAttr("background-color")
Just using:只需使用:
$('.tag-class').removeAttr('style');
or或
$('#tag-id').removeAttr('style');
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);
}
If you use CSS style, you can use:如果使用 CSS 样式,则可以使用:
$("#element").css("background-color","none");
and then replace with:然后替换为:
$("#element").css("background-color", color);
If you don't use CSS style and you have attribute in HTML element, you can use:如果您不使用 CSS 样式并且您在 HTML 元素中有属性,则可以使用:
$("#element").attr("style.background-color",color);
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);
Try this:试试这个:
$('#divID').css({"background":"none"});// remove existing
$('#divID').css({"background":"#bada55"});// add new color here.
Thanks谢谢
2018 2018年
there is native API for that有原生 API
element.style.removeProperty(propery)
这个也能用!!
$elem.attr('style','');
Why not make the style you wish to remove a CSS class?为什么不制作您希望删除的 CSS 类的样式? Now you can use:
.removeClass()
.现在您可以使用:
.removeClass()
。 This also opens up the possibility of using: .toggleClass()
这也开辟了使用的可能性:
.toggleClass()
(remove the class if it's present, and add it if it's not.) (如果存在则删除该类,如果不存在则添加它。)
Adding / removing a class is also less confusing to change / troubleshoot when dealing with layout issues (as opposed to trying to figure out why a particular style disappeared.)在处理布局问题时,添加/删除一个类也不会那么混乱(而不是试图找出特定样式消失的原因。)
let el = document.querySelector(element)
let styles = el.getAttribute('style')
el.setAttribute('style', styles.replace('width: 100%', ''))
Simple is cheap in web development.在 Web 开发中,简单是廉价的。 I recommend using empty string when removing a particular style
我建议在删除特定样式时使用空字符串
$(element).style.attr = ' ';
This is more complex than some other solutions, but may offer more flexibility in scenarios:这比其他一些解决方案更复杂,但可能在场景中提供更大的灵活性:
1) Make a class definition to isolate (encapsulate) the styling you want to apply/remove selectively. 1) 进行类定义以隔离(封装)您要选择性地应用/删除的样式。 It can be empty (and for this case, probably should be):
它可以是空的(对于这种情况,可能应该是):
.myColor {}
2) use this code, based on http://jsfiddle.net/kdp5V/167/ from this answer by gilly3 : 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
}
}
}
}
}
Usage example: http://jsfiddle.net/qvkwhtow/使用示例: http : //jsfiddle.net/qvkwhtow/
Caveats:注意事项:
Isolating the styling this way is what CSS is all about, even if manipulating it isn't.以这种方式隔离样式是 CSS 的全部内容,即使操作它不是。 Manipulating CSS rules is NOT what jQuery is all about, jQuery manipulates DOM elements, and uses CSS selectors to do it.
操纵 CSS 规则不是 jQuery 的全部,jQuery 操纵 DOM 元素,并使用 CSS 选择器来完成它。
Try This试试这个
$(".ClassName").css('color','');
Or
$("#Idname").css('color','');
你删除样式使用
removeAttr( 'style' );
您可以使用:
$("#eslimi").removeAttr("style").hide();
Try试试
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.