如何使用 .css() 函数移除添加的样式？

Question

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

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

我该如何做到这一点？
请注意，当使用颜色选择器选择颜色时（即鼠标在颜色圆盘上移动时），上面的行会运行。

第二个注意事项：我无法使用css("background-color", "none")来实现这一点，因为它会删除CSS文件中的默认样式。 我只想删除由jQuery添加的background-color内联样式。

- Alex

---

可能是如何使用jQuery取消元素的CSS属性？的重复问题。 - Chris Moschini

最好根据您的功能尝试添加/删除类。这不会影响其他样式。 - Prabhakaran

2种在 jQuery 中移除样式的方法及演示 https://codepedia.info/jquery-remove-inline-style - Satinder singh

Answer 1

将属性更改为空字符串似乎能够完成任务：

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

- anon

---

我得支持@baacke的观点。我们的客户仍然要求官方最低IE6的要求(!!)。问题在于他们的客户遍布全球，包括不发达国家。 "客户的客户"可能正在使用非常老旧的计算机与我们的客户交易。因此，必须至少最低限度地支持旧浏览器，否则他们将冒失去业务的风险... - user1429080

你们不能为开发客户的任何解决方案设定要求。如果客户需要或希望支持旧版浏览器，那就是你们的工作，没有其他选择。你们谈论“谁在意”会败坏真正工程师的声誉。 - Ed DeGagne

Answer 2

这个被接受的答案 虽然可行，但在我的测试中会在DOM上留下一个空的style属性。虽然没有什么大问题，但以下代码可以完全删除它：

removeAttr( 'style' );

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

- ThinkingStiff

---

从React应用程序怎么样？ - Eliav Louski

Answer 3

使用 jQuery 删除 CSS 属性有几种方法： 1. 将 CSS 属性设置为其默认（初始）值

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

请参见 MDN 上 CSS 属性的 初始值。这里默认值为transparent。对于几个 CSS 属性，您还可以使用inherit从其父级继承属性。在 CSS3/CSS4 中，您还可以使用initial、revert或unset关键字，但这些关键字可能受到浏览器支持的限制。 2. 删除 CSS 属性 将属性设置为空字符串即可删除 CSS 属性，例如：

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

但要注意，正如jQuery .css()文档中指定的那样，这将删除属性，但它与IE8存在兼容性问题，特别是对于某些CSS简写属性，包括背景。

将样式属性的值设置为空字符串 - 例如 $('#mydiv').css('color', '') - 如果已经直接应用在元素上，可以通过HTML样式属性、通过jQuery的.css()方法或者通过直接DOM操作样式属性来删除该属性。然而，它不会删除在样式表或元素中使用CSS规则应用的样式。警告： 一个显著的例外是，在IE8及以下版本中，删除缩写属性，如border或background，将从元素中完全删除该样式，而不考虑在样式表或元素中设置了什么。

3. 删除元素的整个样式

.removeAttr("style")

- KrisWebDev

Answer 4

我知道如何使用纯JavaScript移除样式属性，只是想让你知道纯JavaScript的方法。

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

- Marwan

---

因为jQuery不是万能的，因为作为开发人员的我们应该知道兼容性的含义以及如何使用核心语言JavaScript来实现这样的功能。也许这是我的理论，我已经根据自己对核心JavaScript的了解创建了自己的框架，拒绝使用其他东西，我有自己的概念和思考方式 :) 顺便说一下，谢谢你的（-）我只是需要增加价值 :) 还有，那个人不是男性，她是一个名叫Alex的女性。 - Marwan

Answer 5

这将会完全移除标签：

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

- SURJEET SINGH Bisht

Answer 6

以下任意一个 jQuery 函数都应该可以工作：

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

- Mahesh Gaikwad

---

仅移除一个 CSS 属性： var cssObject = $('选择器').prop('style'); cssObject.removeProperty('background-color'); - ilgaar

Answer 7

只需使用：

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

或者

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

- Alberto Cerqueira

Answer 8

2018

有本地API可以实现这个功能

element.style.removeProperty(propery)

- pery mimon

Answer 9

如何这样做：

比如：

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

Answer 10

如果您使用CSS样式，可以使用以下代码：

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

然后替换为：

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

如果您没有使用CSS样式，而是在HTML元素中有属性，您可以使用以下代码：

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

- Luis