Question

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

theirs.css

div.stubborn { display: none !important; }

mine.js

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

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

Answer 1

很遗憾，如果不在!important下方使用!important作为内联/内部样式，则无法覆盖theirs.css。

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

<强> CSS：

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

<强> JS：

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

DEMO： http://jsfiddle.net/jjWJT/1/

替代方法（内联），

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

DEMO： http://jsfiddle.net/jjWJT/

Answer 2

只需向此问题的任何图片添加style=""标记，希望它们都有一些定义类，以便它们很容易实现。

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

jsFiddle DEMO

Answer 3

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

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

DEMO HERE

Answer 4

你可以添加一个新的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' });

中的

Answer 5

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

CSS：

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

在jQuery中：

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

然后，当我需要时：

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

像魅力一样工作; - ）

我可以使用jquery删除/否定css！重要规则吗？

5 个答案: