我可以使用 jquery 来删除/否定 css ！important 规则吗？答案

【问题标题】：Can I use jquery to remove/negate css !important rule?我可以使用 jquery 来删除/否定 css ！important 规则吗？
【发布时间】：2012-08-07 02:39:37
【问题描述】：

如果有使用 !important 的 CSS 规则，有没有办法删除 !important 规则，以便我可以使用 JS 或 jQuery 进行进一步的下游样式更改？

theirs.css

div.stubborn { display: none !important; }

mine.js

$('.stubborn').fadeIn();  // won't work because of !important flag

不幸的是，我无法控制应用 !important 规则的样式，因此我需要解决方法。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

我尝试了几种方法，但我获得的最佳结果是在单独的类中添加 CSS 样式（！important），然后使用 jQuery 删除：

CSS：

.important-css-here { display: block !important;}

在 jQuery 中：

$("#selector").addClass("important-css-here");

然后，当我需要时：

$("#selector").removeClass("important-css-here");

像魅力一样工作;-)

【讨论】：

【解决方案2】：

不幸的是，如果不使用 !important 作为包含的 theirs.css 下方的内联/内部样式，您将无法覆盖 !important。

您可以定义!important 样式并将其添加到.stubborn 然后调整不透明度.. 见下文，

CSS：

div.hidden_block_el { 
   display: block !important;
   opacity: 0;
}

JS：

$('.stubborn')
    .addClass('hidden_block_el')
    .animate({opacity: 1});

演示： http://jsfiddle.net/jjWJT/1/

替代方法（内联），

$('.stubborn')
    .attr('style', 'display: block !important; opacity: 0;')
    .animate({opacity: 1});

演示： http://jsfiddle.net/jjWJT/

【讨论】：

+1 遗憾的是，当“！important”工厂发生爆炸时，这是一种需要采用的黑客手段
一些不错的读物stackoverflow.com/questions/3706819/…coding.smashingmagazine.com/2010/11/02/…
+1 我是第二个 inline 方法，尤其是在我使用 jQuery Mobile 的情况下。
+1 表示内联方法，真的。

【解决方案3】：

只需将style="" 标记添加到任何有此问题的图像，希望它们都有某种定义类，这样做很容易。

$('div.stubborn').attr('style', 'display: inline !important;');

jsFiddle DEMO

【讨论】：

【解决方案4】：

您需要创建一个新类来应用淡入淡出。

CSS：

div.stubborn { display: none !important; }
div.stubborn.fade-ready { display: block !important; opacity: 0; }

JS：

$('.stubborn').addClass('fade-ready').animate({opacity: 1}); //to show
$('.stubborn').fadeOut(function() {$(this).removeClass('fade-ready');}); //to hide

演示HERE

【讨论】：

【解决方案5】：

您可以添加一个新的 CSS 样式，其中添加了 !important 将覆盖原始样式

这是来自 javascript 中的另一个答案：

function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js');
if (!styleElement) {
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = 'styles_js';
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}

 addNewStyle('td.EvenRow a {display:inline !important;}')

这个答案是here

我也相信你可以像这样添加样式

        .css({ 'display' : 'block !important' });

在 jQuery 中

【讨论】：