How to override css containing '!important' using jquery?

Question

I want to apply height for specific div using jquery but not able to override the \'!important\' keyword using jquery.

Here is

Answer 1

inline style fails to override the !important given in stylesheets.

Therefore !important can be overridden only by using !important along jQuery

Try like

$('#divL3.myclass').attr('style', 'height: 0px !important');

Answer 2

There is another trick to get it done!!! Can you remove the myclass from the element and apply the height. Like

$('#divL3.myclass').removeClass('myclass').css('height', '0px');

Answer 3

This will work like a charm

    $( '#divL3' ).css("cssText", "height: 0px !important;")

here's the fiddle http://jsfiddle.net/abhiklpm/Z3WHM/2/

Answer 4

no use.suppose if i have some css properties in style attribure.it won't work.so please use below code

 var styleAttr = $("#divAddDetailPans").attr('style');
        $("#divAddDetailPans").removeAttr('style');
        $("#divAddDetailPans").attr('style', styleAttr.replace('top: 198px !important', 'top: 78px !important'));

Answer 5

I was running into a problem where we allow the users to define their own font size for Kendo Grids, however after setting the value, and then manipulating the grid in any way, it'd reset the font size. So we actually defined an ID for the style tag and changed the html with the proper CSS each time.

At the top of our main page, we set the font-size by what is saved in their PHP Session Variable, or from the database.

echo "<style id='grid-style'>table { font-size: $Grid_Font_Size !important; }</style>";

Then in order to change it, we do the following jquery where font_size is the new size

$( "#grid-style" ).html( "table { font-size: " + font_size + "px !important; }" );

Answer 6

Can you try this method,

        <style type="text/css">
        .myclass{
             height:50px !important;
        }
        .newclass{
             height:0px;
        }
        </style>

Jquery:

  $('#divL3').removeClass('myclass').addClass('newclass');