javascript - jquery - 添加删除样式使用.css( ) 函数

  显示原文与译文双语对照的内容

我正在使用jQuery更改 CSS,希望删除基于输入值的样式:


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

我该怎么做? 注意,只要使用颜色选择器( IE ) 选择了颜色,上面的一行就会运行。 当鼠标移过颜色滚轮时) 。

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

时间:

@Pekka's 回答工作,但在我的测试中在DOM上留下一个空的style 属性。 没什么大不了的,但这将把它全部删除:


removeAttr( 'style' );

这假设你想要删除所有动态样式并返回到样式表样式。

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

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


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

在MDN的CSS特性,对闭环系统的,看到的初值为 这里的默认值是 transparent 。 你还可以使用 inherit 对多个CSS属性进行 inherite,以便从其父属性中删除属性。

2.。删除CSS属性

空字符串删除CSS属性,i.e.


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

但是当心,这次新中指定. css() 文档进行操作,因此可以用8 浏览器对某些CSS的属性但有compatibilty问题 shorthand 属性,包括背景

将样式属性的值设置为空字符串 — 比如 $('#mydiv').css('color','') —将从元素中删除该属性,如果该属性已经直接应用到了元素的样式属性,或者通过直接DOM操作样式属性。 但是,它不删除样式表或者元素中使用CSS规则的样式。 在样式表中或者元素,警告:一个值得注意的例外是,对于 IE 8及更低版本,完全删除一个 shorthand 属性( 如背景或者边框会删除该样式从元素,而不管什么是 set.

3 。删除元素的整个样式

 
.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样式,可以使用:


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

或者


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

如果要删除在它的类中定义的CSS:


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

...