删除在 CSS 文件中设置的 CSS 属性（不是内联 CSS）[jQuery]答案

【问题标题】：Remove CSS properties that were set in a CSS file (not inline CSS) [jQuery]删除在 CSS 文件中设置的 CSS 属性（不是内联 CSS）[jQuery]
【发布时间】：2016-01-21 07:39:42
【问题描述】：

我有一个在样式表文件中设置的 CSS 属性：

.main-outer-div-filter {
    max-height: 230px;
}

我正在尝试使用 jQuery 将其删除，如下所示：

$('.main-outer-div-filter').css('max-height','');

由于某种原因，这种方式似乎没有任何影响，它仅在我将样式设置为内联时才有效，但在 CSS 文件中时无效。有什么方法可以使用 jQuery 重置/删除在 CSS 文件中设置的 CSS 属性？

谢谢

【问题讨论】：

使用类来代替，你不能将 CSS 属性重置为初始值
你可以用 !important 覆盖 jQuery 中的 css
jQuery 的.css() 方法为匹配的元素添加内联样式。由于内联样式的特异性值高于任何 CSS 选择器，它应该被实际应用。我建议你看看你的网络浏览器开发工具来弄清楚。顺便说一句，在 CSS 的上下文中，它被称为属性，而不是属性。
如果你想修改DOM中的外部样式表，你可以使用document.styleSheets对象（连同它的方法）。但是 jQuery 没有为此提供任何工具。因此，您应该使用纯 JavaScript 来完成。
@CreativeMind 我认为它已经在 S.O. 上得到了回答。您可能想看看：Can jQuery change css style definition 主题。您还可以找到一些示例here。

标签： javascript jquery css

【解决方案1】：

使用('max-height', '')，您将删除内联 css。如果您之前将其设置为内联，那将起作用。要重置它，请使用initial 值：

$(document).ready(function() {
  $('.special').css({
    'max-height': 'initial'
  });
});

li {
  height: 50px;
  border: 1px solid black;
  max-height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Max-height: 20px;</li>
  <li class="special">Max-height: initial;</li>
</ul>

【讨论】：

【解决方案2】：

您可以使用 jQuery 覆盖具有内联样式的属性，就像您现在所做的那样，只需将该属性设置为某个值。如果您将 max-height 设置为 230px 并希望它完全重置，请使用 'max-height', 'none'

【讨论】：

【解决方案3】：

我建议你使用新的类名来覆盖它：

.main-outer-div-filter {
    max-height: 230px;
}
.main-outer-div-filter.override {
    max-height: initial; /* or none; */
}

在js中你可以设置它：

$('.main-outer-div-filter').addClass('override');

【讨论】：

是的，他可以使用新类或内联 CSS，我相信他知道，但这不是问题
@AnnieTrubak 那么答案很简短：不！做不到。