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

Question

I'm working on an element that I need to be able to add '!important' to my inline style that I am dynamically creating using JS in order to override several CSS styles that exist in stylesheets developed by another person. Unfortunately, these stylesheets are used globally and this particular area has a slew of '!important's strung about through it that I cannot modify without risking altering previous headers that exist throughout the site. I'm fairly rough in my JS skills, thus am having a rough go of figure this out.

Here is my 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 am attempting to append "!important" to the "minHeight" value after it has gone through (height - 1) and cannot seem to figure out how to add the value as a string.

Thank you in advance to any helpers!

---

Edited After Answers

Thanks to all who gave some thoughts - I'll take what I learned from posting my question in here to make sure my next question is better phrased and given with more context. :)

The above question is referring to a global header element that has several "min-height = x!important" existing in global stylesheets that a previous developer created - meaning I don't get to play as freely as I would like. I was able to work around it by creating a new class that contains all of the previous positioning styles and the new "min-height=x" sans '!important' which allowed me to use the above JS as desired.

I'm still curious to see if there is a more simple JS workaround to append an '!important' to an inline style as I don't really want to be creating new classes every time I run into this particular situation.

Answer 1

If you set any CSS style by jQuery, this style is added to DOM element style attribute.

For example, if you have element:

<p class="test" id="testId">

and you will add style by jQuery:

$(".test").css("min-height", 30);

In your DOM you will now have:

<p class="test" id="testId" style="min-height: 30px">

And styles from style attribute overwrite styles from included CSS file, unless you use !impotrant in CSS file.

Just don't use !important in CSS. And when you set new style value by jQuery it will automaticly overwrite style value.

---

How to set min-height style attribute without jQuery:

by 'id' attribute:

document.getElementById("testId").style.minHeight = "30px";

by 'class' attribute:

document.querySelector(".test").style.minHeight = "30px";

querySelector - gets first element with class 'test'

var elementsList = document.querySelectorAll(".test");
for (var i = 0, len = elementsList.length; i < len; i++) {
  elementsList[i].style.minHeight = "30px";
}

query selectors are available in all modern browsers, from IE8. But in IE8 you can't use CSS3 selectors

Answer 2

I assume this is what you are trying to 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 the 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 I don't approve the above solution.

My opinion would be you use CSS,

 $bannerResize = $('$banner-resize')
 if (height < 816){
  $bannerResize.addClass('height815');
  $bannerResize.removeClass('height816')
 }
 else{
  $bannerResize.addClass('height816');
  $bannerResize.removeClass('height815')
 }
}

and CSS for the above should be,

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

Hope that helps.

Answer 3

This is old but there is a right answer to this question so let's put it here for the record.

document.getElementById('banner-resize').style.setProperty('min-height', height, 'important');

What you were missing was the priority argument of the setProperty method of CSSStyleDeclaration.

priority Optional

A DOMString allowing the "important" CSS priority to be set. If not specified, treated as the empty string. The following values are accepted:

• String value "important"
• Keyword undefined
• String empty value ""

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

However - as others have already pointed out and I'll just mention for the record -, unless something went terribly wrong, you should not need !important in element styles as these already have the highest specificity.