如何使用 jQuery 取消设置元素的 CSS 属性？

Posted 2023-02-22

【中文标题】如何使用 jQuery 取消设置元素的 CSS 属性？

【英文标题】：How do I unset an element's CSS attribute using jQuery?

【发布时间】：2010-10-04 04:54:09

【问题描述】：

如果我使用以下方法在特定元素上设置 CSS 值：

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

我希望能够取消设置特定于元素的值并使用级联值，如下所示：

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

但该语法似乎不起作用 - 是否可以使用另一种语法？

编辑：该值不是从父元素继承的——原始值来自元素级选择器。如有任何混淆，请见谅！

【参考方案1】：

来自jQuery docs：

将样式属性的值设置为空字符串——例如$('#mydiv').css('color', '') — 如果该属性已被直接应用，则从元素中删除该属性，无论是在 html 样式属性中，通过 jQuery 的 .css() 方法，还是通过对 style 属性的直接 DOM 操作。但是，它不会删除已在样式表或 <style> 元素中使用 CSS 规则应用的样式。

【讨论】：

我遇到这个问题时遇到了这个问题。在我的情况下，我在标签上的 style 属性中设置了 css 属性，所以这个方法不起作用。使用 .css() 方法而不是在标签中应用样式允许我稍后将其删除。

【参考方案2】：

我认为你也可以这样做：

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

这是我很久以前在plain-old-javascript 中使用display 属性来显示/隐藏字段的方法。

【参考方案3】：

实际上，我认为不正确的语法（null）似乎在起作用——我的选择器只是格式不正确，因此没有产生任何元素。哦！

【讨论】：

从 jquery 1.4.3 开始，css(..., null) 不起作用，应该使用 css(..., '') -- bugs.jquery.com/ticket/7233

【参考方案4】：

试试这个：

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

【讨论】：

不幸的是，继承不是我正在寻找的行为：来自w3.org/TR/CSS2/cascade.html

的“属性采用与元素父级的属性相同的计算值”

更有可能是“初始”而不是“继承”。 'Inherit' 改编自父母，'Initial' 照字面意思行事。

【参考方案5】：

对于它的价值，这在 IE 8 中似乎不适用于“过滤器”，我不得不使用它（在 fadeIn 回调中）：

$(this).attr('style', $(this).attr('style').replace(/\bfilter:\s*;*/, ''));

显然，我需要删除一个空的内联过滤器声明，这样 CSS 才能生效；还有其他内联规则，所以我不能只删除样式属性。

【参考方案6】：

如果有帮助，我用双引号添加一个问题：

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

不工作

$('#element').css('border-color', '');

作品