javascript - Trying to append "!important" to an inline style created with JS -

i'm working on element need able add '!important' inline style dynamically creating using js in order override several css styles exist in stylesheets developed person. unfortunately, these stylesheets used globally , particular area has slew of '!important's strung through cannot modify without risking altering previous headers exist throughout site. i'm rough in js skills, having rough go of figure out.

here current code snippet:

fixtextposition: function() {   var width = $( window ).width();     if (width > 1451){       width = 1451;     }   var height = $( window ).height();     if (height > 816){       height = 816;     }   $("#banner-resize").css("minheight", height);     if (height < 816){       $("#banner-resize").css("minheight", height - 1);     } } 

i attempting append "!important" "minheight" value after has gone through (height - 1) , cannot seem figure out how add value string.

thank in advance helpers!

---

edited after answers

thanks gave thoughts - i'll take learned posting question in here make sure next question better phrased , given more context. :)

the above question referring global header element has several "min-height = x!important" existing in global stylesheets previous developer created - meaning don't play freely like. able work around creating new class contains of previous positioning styles , new "min-height=x" sans '!important' allowed me use above js desired.

i'm still curious see if there more simple js workaround append '!important' inline style don't want creating new classes every time run particular situation.

i assume trying do:

fixtextposition: function(){  var width = $( window ).width();  if (width > 1451){   width = 1451;  }  var height = $( window ).height();  if (height > 816){   height = 816;  }   if (height < 816){   $("#banner-resize").css("min-height", height - 1);  }  else{   $("#banner-resize").css("min-height", height);  } } 

if above doesn't work, try this:

 fixtextposition: function(){  var width = $( window ).width();  if (width > 1451){   width = 1451;  }  var height = $( window ).height();  if (height > 816){   height = 816;  }   if (height < 816){   var ht = height - 1;   $("#banner-resize").css("min-height", ht+" !important");  }  else{   $("#banner-resize").css("min-height", height+" !important");  } } 

although don't approve above solution.

my opinion use css,

 $bannerresize = $('$banner-resize')  if (height < 816){   $bannerresize.addclass('height815');   $bannerresize.removeclass('height816')  }  else{   $bannerresize.addclass('height816');   $bannerresize.removeclass('height815')  } } 

and css above should be,

#banner-resize.height816{   min-height:816px !important; } #banner-resize.height815{   min-height:815px !important; } 

hope helps.