js php unset,javascript - 如何删除添加了.css（）函数的样式？

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

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

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

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

第二个注意：我不能用css("background-color", "none")执行此操作，因为它将从css文件中删除默认样式。 我只是想删除由jQuery添加的background-color内联样式。

Alex asked 2019-01-16T23:10:26Z

17个解决方案

1199 votes

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

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

answered 2019-01-16T23:10:40Z

505 votes

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

removeAttr( 'style' );

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

ThinkingStiff answered 2019-01-16T23:11:09Z

160 votes

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

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

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

查看MDN上CSS属性的初始值。此处的默认值为unset.您还可以使用unset为多个CSS属性从其父级继承该属性。 在CSS3 / CSS4中，您还可以使用unset,unset或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")

KrisWebDev answered 2019-01-16T23:12:23Z

43 votes

我找到了使用纯JavaScript删除样式属性的方法，只是为了让您了解纯JavaScript的方式

var bodyStyle = document.body.style;

if (bodyStyle.removeAttribute)

bodyStyle.removeAttribute('background-color');

else

bodyStyle.removeProperty('background-color');

Marwan answered 2019-01-16T23:12:50Z

15 votes

这些jQuery函数中的任何一个都应该工作：

$("#element").removeAttr("style");

$("#element").removeAttr("background-color")

Mahesh Gaikwad answered 2019-01-16T23:13:13Z

15 votes

这将删除完整标记：

$("body").removeAttr("style");

SURJEET SINGH Bisht answered 2019-01-16T23:13:35Z

5 votes

怎么样的：

var myCss = $(element).attr('css');

myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');

if(myCss == '') {

$(element).removeAttr('css');

} else {

$(element).attr('css', myCss);

}

nclu answered 2019-01-16T23:13:57Z

5 votes

试试这个：

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

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

谢谢

uihelp answered 2019-01-16T23:14:17Z

5 votes

只是使用：

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

要么

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

Alberto Cerqueira answered 2019-01-16T23:14:40Z

4 votes

如果使用CSS样式，则可以使用：

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

然后替换为：

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

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

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

Luis answered 2019-01-16T23:15:15Z

4 votes

使用我的插件：

$.fn.removeCss=function(all){

if(all===true){

$(this).removeAttr('class');

}

return $(this).removeAttr('style')

}

对于您的情况，请按以下方式使用它：

$().removeCss();

要么

$().removeCss(false);

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

$().removeCss(true);

Abdennour TOUMI answered 2019-01-16T23:15:51Z

1 votes

为什么不制作你想要删除CSS类的样式？ 现在你可以使用：.removeClass()。这也开启了使用的可能性：.toggleClass()

(如果它存在则删除该类，如果不存在则添加它。)

在处理布局问题时，添加/删除类也不太容易改变/排除故障(而不是试图找出特定样式消失的原因。)

Neil Girardi answered 2019-01-16T23:16:27Z

1 votes

let el = document.querySelector(element)

let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

Kamil' Ocean answered 2019-01-16T23:16:43Z

0 votes

这一个也工作!!

$elem.attr('style','');

dazzafact answered 2019-01-16T23:17:05Z

0 votes

这比其他一些解决方案更复杂，但可能在场景中提供更多灵活性：

1)创建一个类定义来隔离(封装)您想要选择性地应用/删除的样式。 它可以是空的(对于这种情况，可能应该是)：

.myColor {}

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

}

}

}

}

}

用法示例：[http://jsfiddle.net/qvkwhtow/]

注意事项：

没有经过广泛测试。

不能在新值中包含！important或其他指令。 任何这样的现有指令都将通过这种操纵而丢失。

只有更改首先发现了styleSelector的出现。 不添加或删除整个样式，但这可以通过更复杂的东西来完成。

任何无效/不可用的值都将被忽略或抛出错误。

在Chrome中(至少)，非本地(如跨站点)CSS规则不会通过document.styleSheets对象公开，因此这对它们不起作用。 必须添加本地覆盖并操纵它，记住此代码的“首次发现”行为。

document.styleSheets对一般的操作并不是特别友好，不要指望这个用于积极使用。

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

dkloke answered 2019-01-16T23:18:46Z

0 votes

简单在Web开发中很便宜。 我建议在删除特定样式时使用空字符串

$(element).style.attr = ' ';

Victor Michael answered 2019-01-16T23:19:11Z

0 votes

试试这个

$(".ClassName").css('color','');

Or

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

Basant Rules answered 2019-01-16T23:19:28Z