Can I use jquery to remove/negate css !important rule?

Question

If there is a CSS rule that uses !important, is there a way to remove the !important rule so that I can make further downstream style changes with JS or jQuery?

theirs.css

div.stubborn { display: none !important; }

mine.js

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

Unfortunately, I do not have control over the style applying the !important rule so I need a work-around.

Answer 1

Unfortunately, you cannot override !important without using !important as inline/internal style below the included theirs.css.

You can define a !important style and add it to .stubborn then adjust the opacity.. See below,

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/

Alternate approach (inline),

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

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

Answer 2

Just add a style="" tag to any images with this issue, hopefully they all have some sort of defining class to them that it's easy to do so.

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

jsFiddle DEMO

Answer 3

You need to create a new class to apply fade.

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