如何删除添加了.css()函数的样式？

Question

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

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

我怎样才能做到这一点？请注意,只要使用颜色选择器选择颜色(即鼠标在色轮上移动时),就会运行上面的一行.

第二个注意:我不能这样做css("background-color", "none")因为它将从css文件中删除默认样式.我只想删除background-colorjQuery添加的内联样式.

Answer 1

将属性更改为空字符串似乎可以完成此任务.

__CODE__

Answer 2

接受的答案有效但style在我的测试中在DOM上留下了一个空属性.没什么大不了的,但是这一切都消除了:

removeAttr( 'style' );

这假设您要删除所有动态样式并返回样式表样式.

Answer 3

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

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

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

查看MDN上CSS属性的初始值.这里的默认值是transparent.您还可以使用inherit多个CSS属性从其父级继承该属性.在CSS3/CSS4,你也可以使用initial,revert或unset但这些关键字可能只有有限的浏览器的支持.

2.删除CSS属性

空字符串删除CSS属性,即

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

但请注意,正如jQuery .css()文档中所指定的,这会删除该属性,但它与IE8的某些CSS速记属性(包括背景)存在兼容性问题.

将style属性的值设置为空字符串 - 例如$('#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

2018年

有原生 API

element.style.removeProperty(propery)

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

试试这个:

$('#divID').css({"background":"none"});// remove existing

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

谢谢

Answer 10

只是使用:

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

要么

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

Answer 11

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

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

然后替换为:

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

如果您不使用CSS样式并且HTML元素中有属性,则可以使用:

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

Answer 12

使用我的插件:

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

对于您的情况,请按以下方式使用它:

$(<mySelector>).removeCss();

要么

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

如果你想删除其类中定义的CSS:

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