jQuery。" /> jQuery。"> jQuery。" />
我正在用 jQuery 更改 CSS,我希望删除我根据输入值添加的样式:
if(color != '000000') $("body").css("background-color", color); else // remove style ?
我怎样才能做到这一点?请注意,只要使用颜色选择器选择颜色(即鼠标移动到色轮上),上面的行就会运行。
第二点:我不能用 css("background-color", "none")
执行此操作,因为它会从 CSS 文件中删除默认样式。
我只想删除 添加的 background-color
内联样式>jQuery。
将属性更改为空字符串似乎可以完成这项工作:
$.css("background-color", "");
The accepted answer 有效,但在我的测试中在 DOM 上留下了一个空的 style
属性。没什么大不了的,但这消除了一切:
removeAttr( 'style' );
这假设您要删除所有动态样式并返回到样式表样式。
有几种方法可以使用 jQuery 删除 CSS 属性:
1. 将 CSS 属性设置为其默认(初始)值
.css("background-color", "transparent")
请参阅 initial value for the CSS property at MDN。这里的默认值为 transparent
。您还可以将 inherit
用于多个 CSS 属性以从其父级继承属性。在 CSS3/CSS4 中,您也可以使用 initial
、revert
或 unset
,但这些关键字的浏览器支持可能有限。
2. 移除 CSS 属性
空字符串删除 CSS 属性,即
.css("background-color","")
但请注意,如 jQuery .css() documentation 中所述,这会删除该属性,但对于某些 CSS 速记属性(包括 background)存在与 IE8 的兼容性问题。
将样式属性的值设置为空字符串 — 例如 $('#mydiv').css('color', '') — 如果该属性已被直接应用,则从元素中删除该属性,无论是在 HTML 样式中属性,通过 jQuery 的 .css() 方法,或者通过 style 属性的直接 DOM 操作。但是,它不会删除在样式表或元素中使用 CSS 规则应用的样式。警告:一个值得注意的例外是,对于 IE 8 及更低版本,删除诸如边框或背景之类的速记属性将从元素中完全删除该样式,而不管样式表或元素中设置了什么。
3.移除元素的整个样式
.removeAttr("style")
我得到了用纯 JavaScript 移除样式属性的方法,只是为了让你知道纯 JavaScript 的方法
var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
bodyStyle.removeAttribute('background-color');
else
bodyStyle.removeProperty('background-color');
这将删除完整的标签:
$("body").removeAttr("style");
这些 jQuery 函数中的任何一个都应该工作:
$("#element").removeAttr("style");
$("#element").removeAttr("background-color")
var cssObject = $('selector').prop('style'); cssObject.removeProperty('background-color');
只需使用:
$('.tag-class').removeAttr('style');
或者
$('#tag-id').removeAttr('style');
怎么样:
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);
尝试这个:
$('#divID').css({"background":"none"});// remove existing
$('#divID').css({"background":"#bada55"});// add new color here.
谢谢
2018
有本机API
element.style.removeProperty(propery)
这个也行!!
$elem.attr('style','');
为什么不制作您希望删除 CSS 类的样式?现在您可以使用:.removeClass()
。这也开辟了使用的可能性:.toggleClass()
(如果存在则删除该类,如果不存在则添加它。)
在处理布局问题时,添加/删除一个类也不太容易更改/排除故障(而不是试图找出特定样式消失的原因。)
let el = document.querySelector(element)
let styles = el.getAttribute('style')
el.setAttribute('style', styles.replace('width: 100%', ''))
您使用删除样式
removeAttr( 'style' );
这比其他一些解决方案更复杂,但可以在场景中提供更大的灵活性:
1)制作一个类定义来隔离(封装)您想要有选择地应用/删除的样式。它可以是空的(对于这种情况,可能应该是):
.myColor {}
2) 使用此代码,基于 gilly3 的 this answer 中的 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/
注意事项:
没有经过广泛测试。
不能在新值中包含 !important 或其他指令。任何此类现有指令都将通过此操作丢失。
仅更改第一次找到的 styleSelector。不会添加或删除整个样式,但这可以通过更精细的方式来完成。
任何无效/不可用的值都将被忽略或抛出错误。
在 Chrome 中(至少),非本地(如跨站点)CSS 规则不会通过 document.styleSheets 对象公开,因此这对它们不起作用。必须添加本地覆盖并对其进行操作,同时牢记此代码的“第一次发现”行为。
document.styleSheets 通常对操作不是特别友好,不要指望这可以用于激进的使用。
以这种方式隔离样式是 CSS 的全部意义所在,即使不是操纵它。操作 CSS 规则并不是 jQuery 的全部内容,jQuery 操作 DOM 元素,并使用 CSS 选择器来完成。
简单在 Web 开发中很便宜。我建议在删除特定样式时使用空字符串
$(element).style.attr = ' ';
尝试这个
$(".ClassName").css('color','');
Or
$("#Idname").css('color','');
您可以使用:
$("#eslimi").removeAttr("style").hide();
尝试
document.body.style=''
$("body").css("背景色", '红色');函数 clean() { document.body.style='' } body { 背景颜色:黄色; }