how to overwrite css height set by jquery/javascript?

Question

I have this:

 var setHeight = $(this).outerHeight(); 
 // returns e.g. 687

 $("#someElement").css({'height': $setHeight+"px !important" });
 // I want to override this jquery-set height

I'm not sure this is the right way... probably not, since it's not working.

Thanks for helping out!

Answer 1

setHeight, not $setHeight. and the !important is unneeded.

Answer 2

Your variable name doesn't have a leading $. Also, the !important flag will cause this not to work in Firefox, however as you're applying this style directly to the element, you shouldn't need it.

$("#someElement").css({ 'height': setHeight + "px" });

Also note that if you're only setting the element's height you can also just shorten this to a height() call:

$("#someElement").height(setHeight);

Answer 3

Your variables don't match; remember that punctuation and proper spelling are important to calling the variable properly; try changing the second line to:

$("#someElement").css('height',setHeight+'px !important');

Answer 4

Take out dollar sign ;) 'setHeight'

Answer 5

That should totally work except that your variable is setHeight and you are trying to use $setHeight. Make sure they are the same. Make sure your selector is correct and obtaining the element. I believe that you don't even need the !important. The style tag should overwrite any .css definition unless you have !important in it.