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

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 "";

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; }" );