我正在用jQuery改变CSS,我希望删除我根据输入值添加的样式:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

我该怎么做呢? 请注意,每当使用颜色选择器选择颜色时,上面的行就会运行。当鼠标移动到一个色轮上时)。

第二注意:我不能这样做与css("background-color", "none"),因为它将删除默认样式从css文件。 我只是想删除jQuery添加的背景色内联样式。


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

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

在我的测试中,接受的答案可以工作,但在DOM上留下一个空的样式属性。没什么大不了的,但这就完全消除了:

removeAttr( 'style' );

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


我讲了用纯JavaScript删除样式属性的方法让你们知道纯JavaScript的方法

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

有几种方法来删除CSS属性使用jQuery:

1. 将CSS属性设置为默认值(初始值)

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

请参阅MDN上CSS属性的初始值。 这里的默认值是透明的。您还可以对多个CSS属性使用inherit来从其父属性继承该属性。在CSS3/CSS4中,你也可以使用initial, revert或unset,但是这些关键字可能只有有限的浏览器支持。

2. 删除CSS属性

空字符串删除CSS属性,即。

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

但是要注意,正如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.

3.删除元素的整个样式

.removeAttr("style")

如果你使用CSS样式,你可以使用:

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

然后替换为:

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

如果你不使用CSS样式,你在HTML元素中有属性,你可以使用:

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

使用我的插件:

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

对于你的情况,使用它如下:

$(<mySelector>).removeCss();

or

$(<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)使用以下代码,基于gilly3的回答http://jsfiddle.net/kdp5V/167/:

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/

警告:

Not extensively tested. Can't include !important or other directives in the new value. Any such existing directives will be lost through this manipulation. Only changes first found occurrence of a styleSelector. Doesn't add or remove entire styles, but this could be done with something more elaborate. Any invalid/unusable values will be ignored or throw error. In Chrome (at least), non-local (as in cross-site) CSS rules are not exposed through document.styleSheets object, so this won't work on them. One would have to add a local overrides and manipulate that, keeping in mind the "first found" behavior of this code. document.styleSheets is not particularly friendly to manipulation in general, don't expect this to work for aggressive use.

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


试试这个

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

只是用:

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

or

$('#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();

Try

document.body.style=''

$("身体"). css(“背景颜色”,“红”); 函数clean() { document.body.style = " } 正文{background-color:黄色;} < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> <按钮onclick = "清洁()“>删除样式> < /按钮